【问题标题】:Angular UI Bootstrap Modal doesn't work with ng-includeAngular UI Bootstrap Modal 不适用于 ng-include
【发布时间】:2013-03-01 07:29:57
【问题描述】:

现场示例:http://plnkr.co/edit/wWS3UFB3IZ0cAI4u2x04?p=preview

点击“Open Modal 1”时,抛出如下错误:

错误:Dialog.open 预期的模板或 templateUrl,均未找到。使用选项或打开方法来指定它们。

但是,不使用 ng-include 的模态 2 可以正常工作。

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

有什么想法吗?

【问题讨论】:

  • 文档声明 modal 适用于 modals that are already in your DOM。如果还没有在 DOM 中,可以使用较低级别的 dialog

标签: angularjs angular-ui angular-ui-bootstrap angularjs-ng-include


【解决方案1】:

我相信这个问题是由于将 modal 指令更改为终端的结果。这意味着其他指令(例如 ng-include)将不会与 modal 一起处理。这是进行此更改的提交:

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

【讨论】:

  • 我已经修复了示例代码。问题似乎是该操作包含来自 Github 的 angular-ui 主分支,而不是实际版本。我将其更改为发布版本,示例再次正常工作。
【解决方案2】:

我不知道那是什么版本的 Angular-ui,但模态窗口的文档仍然令人困惑。虽然您确实可以使用 ngInclude 指令作为显示模态窗口的一部分,但它不是必需的,如下所示。在下面的案例中,模态 html 和脚本位于不同的文件中,并且 modal.open() 用于引用和显示它们。出于某种原因,我只能在将可更新模型作为 $scope 的对象属性传递时才能实现它。(参见代码中的“vm”)

ModalView.html sn-p

<!-- 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 sn-p

 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 sn-p

 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 () {
                ... 
            }
         );

      });
   });

但是,如果您确实想使用包含,则有两个问题。

  1. “templateUrl”必须引用模态元素包含标签的 Id,例如 ngInclude 自身的 Id,与模板文件的 URL 相对。
  2. 因为 Angular 评估属性值,如果向路径的 src 属性提供了文字,则它必须在已引用的字符串中被引用:

【讨论】:

  • 谢谢!我实际上是在寻找一种方法来指定特定于模态显示的视图和控制器。非常适合可测试性和关注点分离。
猜你喜欢
  • 2015-03-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多