Question

我是角度和自举的新手。这是我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')
        {

        }
      });
  });

ModalController：

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>

的index.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和controller。不知怎的，这不起作用。

Answer 1

这是一个基于你自己的插件的工作的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函数内部的模态结果，而不是在它之外。

Answer 2

那里你犯了很多错误。这是你的例子：

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

Angular UI bootstrap模式不起作用

2 个答案: