角UI引導模態不與工作NG-包括

活生生的例子：http://plnkr.co/edit/wWS3UFB3IZ0cAI4u2x04?p=preview 角UI引導模態不與工作NG-包括

當「打開模態1」被點擊時，下面的錯誤被拋出：

Error: Dialog.open expected template or templateUrl, neither found. Use options or open method to specify them.

然而，莫代爾2，其中不使用ng-include，工作正常。

此外，如果包括ui-bootstrap-tpls-0.1.0.js而不是ui-bootstrap-tpls-0.2.0.js，所有工作正常。

任何想法？

來源

2013-03-13 Misha Moroshko

文檔狀態'modal'適用於已經在您的DOM中的模塊。如果DOM中尚未使用較低級別的'對話框' – charlietfl 2013-03-13 12:00:28

我認爲這個問題是改變模態指令爲終端的結果。這意味着其他指令（例如ng-include）將不會與模態一起處理。這裏的承諾，使得這變化：

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

老實說，我不知道有足夠的瞭解這究竟爲什麼這個指令應該是終端，但一個簡單的解決方案就是使用NG-包括作爲一個孩子的模態，而不是作爲第二個指令作用於相同的元素。這就是我的意思是：

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

更新活生生的例子： http://plnkr.co/edit/niYVIL9l8L8niBz56S4z?p=preview

來源

2013-03-13 11:58:19 jncraton

更新後的現場示例似乎不起作用。與原始模式例子相比，它還有更長的來源清單和相當可疑的清單。請更新。 – 2014-05-16 23:18:51

不知角度的用戶界面，只不過爲模態窗口的文檔始終撲朔迷離的是什麼版本。雖然你確實可以使用ngInclude指令作爲顯示模式窗口的一部分，但不需要如下所示。在下面的情況下，模態HTML和腳本在單獨的文件中，並且使用modal.open（）來引用和顯示它們。出於某種原因，我只能當它被作爲$範圍的對象屬性傳遞到效果的更新模式。（參見「虛擬機。」在代碼）

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」必須引用調式元素的標識包含標籤，如ngInclude的ID其本身作爲反對模板文件的URL。
由於角求值屬性值，如果一個文字被提供給路徑中的元件就必須在已經引用字符串內引用的src屬性：

來源

2013-09-30 03:19:13 George

謝謝！實際上，我正在尋找一種方法來指定特定於模式顯示的視圖和控制器。非常適合可測試性和關注分離。 – joshperry 2014-03-31 15:45:25

角UI引導模態不與工作NG-包括

回答

相關問題