[英]Angular-ui modal: How to use the same controller?
通常,我创建了一个使用$scope
语法的控制器,因此,我可以将当前的$ scope传递给modal指令的隔离范围,如下所示:
$scope.openEditModal = function() {
$scope.modalInstance = $modal.open({
templateUrl: 'views/budgets/mainbudgets/edit',
scope: $scope // Passing a $scope variable
});
$scope.modalInstance.close();
};
但是,我只是切换了控制器以使用this
语法:
var self = this;
// User edit modal
this.openEditModal = function() {
self.modalInstance = $modal.open({
templateUrl: 'views/budgets/mainbudgets/edit',
scope: self; // This doesn't work
});
self.modalInstance.close();
};
所以,我怎样才能使电流this
在模态指令隔离范围使用?
编辑
这是我的控制器的完整代码:
angular.module('sms.budgets').controller('BudgetsMainController', ['$scope', 'Global', '$modal', '$timeout', '$rootScope','Budgets', function($scope, Global, $modal, $timeout, $rootScope,Budgets) {
var self = this;
this.newBudget = {};
this.budgets = [];
function init() {
var data = {};
// Load main budget from DB
Budgets.load('main-budgets').success(function(budgets) {
self.budgets = budgets || [];
});
}
init();
/**
* Create a new main budget
*/
this.create = function() {
var data = {};
data.budget = self.newBudget;
data.dbName = 'Budget';
Budgets.create('budgets', data).success(function() {
self.isSuccess = true;
$timeout(function() {
self.isSuccess = false;
}, 5000);
}).error(function(err) {
self.isError = true;
$timeout(function() {
self.isError = false;
}, 5000);
});
};
this.edit = function() {
self.modalInstance.close();
};
// User edit modal
this.openEditModal = function() {
var newScope = $rootScope.$new();
newScope.modalInstance = self.modalInstance;
newScope.edit = self.edit;
self.modalInstance = $modal.open({
templateUrl: 'views/budgets/mainbudgets/edit',
scope: newScope
});
self.modalInstance.close();
};
this.cancelEditModal = function() {
self.modalInstance.dismiss('cancel');
};
}]);
您不能将其用作范围。 他们是不同的。 由于$ scope是AngularJS的内部变量,因此必须将其保持不变。
为了说明这一点,我创建了一个Plunkr(打开控制台,查看它和$ scope之间的区别)。
http://plnkr.co/edit/DkWQk4?p=preview
无论如何,在模态控制器上使用其他范围是一个好习惯。 这里有一个示例,显示了如何在主控制器和模态控制器之间进行通信:
从MainCtrl :
var modalInstance = $modal.open({
templateUrl: 'views/parts/modalUrlImg.html',
controller: 'ModalUrlCtrl',
resolve: {
url: function () { // pass the url to the modal controller
return $scope.imageUrl;
}
}
});
// when the modal is closed, get the url param
modalInstance.result.then(function (url) {
$scope.courses[i].imageUrl = url;
});
从模式Ctrl :
.controller('ModalUrlCtrl', function($scope, $modalInstance, url) {
$scope.url = url; // get the url from the params
$scope.Save = function () {
$modalInstance.close($scope.url);
};
$scope.Cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.Clean = function () {
$scope.url = '';
};
});
希望这对您有所帮助,加油。
-编辑-
您可以将控制器保留为语法。 实际上,您必须同时使用这两种语法,因为您只能使用它来添加变量和函数,而不能访问其他作用域的东西,例如$ scope。$ on...。
因此,要根据您的情况进行操作,只需传递$ scope即可:
var self = this;
// User edit modal
this.openEditModal = function() {
self.modalInstance = $modal.open({
templateUrl: 'views/budgets/mainbudgets/edit',
scope: $scope;
});
self.modalInstance.close();
};
我已经尝试了更新的plunkr,现在可以正常工作:
$ scope!=控制器
通过this
传递给$modal.open()
您传递的是控制器而不是范围的引用。 尝试通过$scope
代替。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.