我不知道那是什么版本的 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 () {
...
}
);
});
});
但是,如果您确实想使用包含,则有两个问题。
- 'templateUrl' 必须引用模态元素包含标签的 Id,例如 ngInclude 本身的 Id,与模板文件的 URL 相对。
因为 Angular 评估属性值,如果向 path 的 src 属性提供了文字,则它必须在已引用的字符串中被引用: