Angular UI 引导模式不起作用答案

【问题标题】：Angular UI bootstrap modal is not workingAngular UI 引导模式不起作用
【发布时间】：2015-11-05 09:29:03
【问题描述】：

我是角度和引导程序的新手。这是我的Plunk。这是我的 DemoController 代码：

angular.module('app', ['ui.bootstrap'])
  .controller('demoController', function($modal) {
    this.message = 'It works!';

    key = 1000;

    this.modalInstance = this.modal = function(){
      $modal.open({
        controllerAs: 'modalController as modal',
        templateUrl: 'modal.html',
        resolve: {
          key: function() {
            return key;
          }
        }
      });


    };

     this.modalInstance.result.then(function (optionSelected){
        if(optionSelected == 'yes')
        {

        }
      });
  });

模态控制器：

angular.module('app')
.controller('modalController', function($scope, $modalInstance, key) {


    $scope.featureName = key;

            $scope.yes = function () {
                $modalInstance.close('yes');
            };
            $scope.discard = function () {
                $modalInstance.close('discard');
            };
            $scope.goback = function () {
                $modalInstance.close('goback');
            };
});

Modal.html：

<script type="text/ng-template" id="modal.html">



  <div class="modal-content">

    <div class="modal-body">
      <p>Do you want to save the changes to {{featureName}} </p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" ng-click="yes()">Yes</button>
      <button type="button" class="btn btn-default" ng-click="discard()">Discrad</button>
      <button type="button" class="btn btn-default" ng-click="goback()">Go Back</button>
    </div>
  </div>

</script>

索引.html：

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="demoController as demo">
    <h1>{{ demo.message }}</h1>

    <button class="btn btn-primary" ng-click="demo.modal()">Open modal</button>



  </body>

</html>

我想将数据从演示控制器传递到模态控制器。我想为模态对话框设置单独的 html 和控制器。不知何故，这不起作用。

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

这是一个基于你自己的 plunk 的工作 plunker：http://plnkr.co/edit/VDDyDuBoZ30tAk2kQKoc?p=preview

更改内容列表：

在index.html 中，我将Ctrl.js 添加到已加载脚本的列表中。
在modal.html 中，删除了 html 周围的脚本标签。从外部文件加载模态 html 时，不需要脚本标签。

最后在script.js 做了一些改动，最终如下：

angular.module('app', ['ui.bootstrap'])
.controller('demoController', function($modal) {
  this.message = 'It works!';

  var key = 1000;

  this.modal = function() {
    var modalInstance = $modal.open({
      controller: 'modalController',
      templateUrl: 'modal.html',
      resolve: {
        key: function() {
          return key;
        }
      }
    });
    modalInstance.result.then(function(optionSelected) {
      if (optionSelected === 'yes') {
        console.log("Yes selected!")
      }
    })
  }
});

基本上，this.modal 是单击“打开”模式按钮时执行的函数。在函数中，我们初始化了一个变量modalInstance，也就是$modal.open函数调用。我们还在 this.modal 函数内部而不是在它外部处理模态结果。

【讨论】：

【解决方案2】：

你有很多错误。这是您的示例：

plnkr.co/edit/47WJrWHW7ueYXBpiYJbA?p=preview

【讨论】：