实例: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
,则一切正常。
有什么想法吗?
答案 0 :(得分:10)
我认为这个问题是将模态指令更改为终端的结果。这意味着其他指令(例如ng-include)将不会与模态一起处理。这是进行此更改的提交:
老实说,我对此知之甚少并不知道为什么这个指令应该是终结的,但一个简单的解决方案就是使用ng-include作为modal的子代,而不是作为第二个指令作用于同一个元素。这就是我的意思:
<div modal="opened1">
<ng-include src="'modal1.html'"></ng-include>
</div>
答案 1 :(得分: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,那么有两个陷阱。
因为angular会对属性值进行求值,所以如果向path的src属性提供了一个文字,那么该元素必须在已引用的字符串中引用: