Angularjs -一个控制器中的Angular UI $modal和$modalInstance
我想问一下，我知道AngularUI的模式由两个控制器组成，一个是我用来处理数据的默认控制器，另一个是处理$modelInstances的控制器，这对我来说很好。但我想要做的是，在我的模式显示中呈现/编辑数据时，我将使用几个作用域。我没有解决控制器之间的所有这些作用域，而是尝试将两个控制器合并在一起，这样作用域就可以在网页之间共享。(注意到这是一个实时范围)我所做的如下所示
angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app').controller('ModelCtrl', function ($scope, $modal, $modalInstance) {
$scope.items = ['item1', 'item2', 'item3'];
//I have a few more scopes to be used in the model
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModelCtrl',
size: 'lg',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function () {
}, function () {
});
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});我已经将两个控制器合并为一个，并注入相关的模块，以便它在理论上可以工作。但是我得到的却是一个错误，写的是[$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ModelCtrl。从这个错误中理解，这意味着我注入了一个未知的提供者$modalInstanceProvider，所以我试图从模块中删除$modalInstance，Modal设法打开了，但close和dismiss的操作抛出了$modalInstance is not defined错误。我做错了什么?我应该如何组合两个控制器，而不是将它们分成两个？
这里是plunkr链接，所以你可以理解我的意思。谢谢。
回答 2
Stack Overflow用户
发布于 2016-05-12 15:32:44
你不需要为创建的模式创建一个新的控制器，只需这样做：
angular.module('app').controller('ModelCtrl', function ($scope, $modal) {
注意我没有给$modalInstance注入
那么模态创建就像这样：
var modalInstance = $modal.open({
animation: true,
templateUrl: 'myModalContent.html',
size: 'lg',
scope: $scope, //i make modal scope the same as ModelCtrl scope
});然后使用您创建的modalInstance来操作该模型
所以最终的代码是
angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app').controller('ModelCtrl', function ($scope, $modal) {
$scope.items = ['item1', 'item2', 'item3'];
//I have a few more scopes to be used in the model
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'myModalContent.html',
size: 'lg',
scope: $scope
});
modalInstance.result.then(function () {
}, function () {
});
};
$scope.ok = function () {
modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
modalInstance.dismiss('cancel');
};
});Stack Overflow用户
发布于 2018-01-19 14:30:10
我检查了上面的答案，但modalInstance close不起作用。所以像下面这样改变了代码，它现在可以工作了。
$scope.open = function() {
$scope.$modalInstance = $modal.open({
scope: $scope,
templateUrl: "modalContent.html",
size: '',
}
};
$scope.ok = function() {
$scope.$modalInstance.close();
};
$scope.cancel = function() {
$scope.$modalInstance.dismiss('cancel');
};https://stackoverflow.com/questions/32044804
复制相似问题
腾讯云开发者
