gpt4 book ai didi

javascript - Angular-ui 模态 : How to use the same controller?

转载 作者:行者123 更新时间:2023-11-28 19:26:42 26 4
gpt4 key购买 nike

通常,我创建了一个使用 $scope 语法的 Controller ,因此,我可以将当​​前 $scope 传递到模态指令的隔离范围,如下所示:

$scope.openEditModal = function() {
$scope.modalInstance = $modal.open({
templateUrl: 'views/budgets/mainbudgets/edit',
scope: $scope // Passing a $scope variable
});

$scope.modalInstance.close();
};

但是,我刚刚将 Controller 切换为使用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 以在模态指令的隔离范围内使用?

编辑

这是我的 Controller 的完整代码:

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

无论如何,在模态 Controller 上使用不同的范围是一个很好的做法。这里有一个示例,展示了如何在主 Controller 和模态 Controller 之间进行通信:

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 = '';
};
});

希望这对你有帮助,干杯。

--- 编辑 ---

您可以将 Controller 保留为语法。事实上,您必须混合使用两种语法,因为您只能使用它来添加变量和函数,而不能访问其他作用域事物,例如 $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 中尝试过,它现在可以工作了:

http://plnkr.co/edit/DkWQk4?p=preview

关于javascript - Angular-ui 模态 : How to use the same controller?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27767040/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com