Question

实例：http://plnkr.co/edit/wWS3UFB3IZ0cAI4u2x04?p=preview

单击“打开模态1”时，将引发以下错误：

错误：找不到Dialog.open预期模板或templateUrl。使用选项或open方法指定它们。

然而，不使用ng-include的模态2工作正常。

此外，如果包含ui-bootstrap-tpls-0.1.0.js而不是ui-bootstrap-tpls-0.2.0.js，则一切正常。

有什么想法吗？

Answer 1

我认为这个问题是将模态指令更改为终端的结果。这意味着其他指令（例如ng-include）将不会与模态一起处理。这是进行此更改的提交：

https://github.com/angular-ui/bootstrap/commit/ec796ec2299d03ddfb821e97047c0329f11ab962#src/modal/modal.js

老实说，我对此知之甚少并不知道为什么这个指令应该是终结的，但一个简单的解决方案就是使用ng-include作为modal的子代，而不是作为第二个指令作用于同一个元素。这就是我的意思：

<div modal="opened1">
    <ng-include src="'modal1.html'"></ng-include>
</div>

更新了实例： http://plnkr.co/edit/KBBOn2T8cbeLfB0Su9jp

Answer 2

我不知道是什么版本的Angular-ui，但模态窗口的文档仍然令人困惑。虽然您确实可以使用ngInclude指令作为显示模态窗口的一部分，但是没有必要如下所示。在下面的例子中，模态html和脚本在单独的文件中，modal.open（）用于引用和显示它们。出于某种原因，当它作为$ scope的对象属性传递时，我只能影响可更新模型..（参见代码中的'vm。'）

ModalView.html代码段

<!-- html elements reference the ModalViewCtrl decorated $scope -->
<input ng-model='vm.email' type='email' placeholder='Email address' autofocus />
<input ng-model="vm.password" type="password" class="form-control" placeholder="Password" />
<label class="checkbox">
    <input ng-model="vm.rememberMe" type="checkbox" />
    Remember me
</label>

ModalViewCtrl.js片段

 angular.module('app')
   .controller('ModalViewCtrl', function($scope, $modal, parms) {

      /* decorate the $scope and/or preset the $scope.vm object
         as needed with parms.parm1, parms.parm2, ....
      */

      $scope.ok = function () {
         $modalInstance.close($scope.vm);
      };

      $scope.cancel = function () {
         $modalInstance.dismiss();
      };     

   });

SourcePageCtrl.js片段

 angular.module('app')
   .controller('SourcePageCtrl', function($scope, $modal, ...) {

      $scope.open = function() {
         var modalInstance = $modal.open({
            templateUrl: 'path_literal_to_ModalView.html'
            ,controller: 'ModalViewCtrl'
            ,resolve : {
                parms : function() { return {
                   parms1 : value1
                  ,parm2 : value2
                  ,...
                }}
            });

         modalInstance.result.then(
            function (vm) { 
                $scope.result = vm;
            } , function () {
                ... 
            }
         );

      });
   });

但是，如果你确实想使用include，那么有两个陷阱。

'templateUrl'必须引用包含标记的模态元素的Id，例如ngInclude本身的Id与模板文件的URL相对。
因为angular会对属性值进行求值，所以如果向path的src属性提供了一个文字，那么该元素必须在已引用的字符串中引用：

Angular UI Bootstrap Modal不适用于ng-include

2 个答案: