Angularjs 将模态控制器内部的表单传递给模态外部的 ng-controller
Angularjs Pass form which is inside modal controller to ng-controller outside modal
所以我有点困惑为什么这不起作用:
我的 Angular 主页面有一个名为 "SearchCtrl" 的 ng-controller,它包含一堆用于将搜索发送到网络服务器的逻辑。
app.controller('SearchCtrl', ['$http','$scope', function($http,$scope) {
$scope.doAlert = function() {
console.log('search page alert inside searchresultsctrl');
}
这个控制器包含在我的搜索页面上,然后在页面下方的某处有另一个控制器 SearchSortModalCtrl,它将弹出一个模式并让用户做一些事情:
app.controller('SearchSortModalCtrl', function ($scope, $modal, $log) {
.....
var modalInstance = $modal.open({
templateUrl: '/modal-search-sort.html',
controller: 'SearchSortFormCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
连接到此控制器的是:
app.controller('SearchSortFormCtrl', ['$http','$scope','$rootScope','$modalInstance', function($http,$scope,$rootScope,$modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss();
};
$scope.doAlert2 = function() {
console.log('search page alert test2');
}
所以无论如何,我想做的是在模态表单中放置一个 ng-submit,当提交该表单时,它将在 SearchCtrl 上执行一些逻辑。
但如果我这样做
ng-submit="doAlert()"
在我的模式中,它不会工作或向 SearchCtrl 发送任何内容,但如果我将其更改为 doAlert2(),它当然会在 SearchSortFormCtrl 上 运行。我试过了
ng-submit="$parent.doAlert()"
但没有骰子,为了向您展示我正在努力达到什么水平,我什至尝试过
ng-submit="$parent.$parent.doAlert()"
那什么也没做。
我哪里做错了,或者我怎样才能让这个表单只在 SearchCtrl 中做一些事情?
由于您的控制器是 SearchCtrl
的子控制器,因此它的任何后代(独立作用域指令除外)将自动继承 doAlert
函数。在您的情况下,您没有在模态设置中使用 scope
选项,因此模态范围最终将是 $rootScope
而 angular ui 模态。您可以在控制器的设置中提供范围选项。所以:
要么设置 scope:$scope
,要么如果您不想使用模态控制器设置的属性污染当前控制器范围,请设置子范围,即 scope:$scope.$new()
.
var modalInstance = $modal.open({
templateUrl: '/modal-search-sort.html',
controller: 'SearchSortFormCtrl',
size: size,
scope: $scope, //Or $scope.$new()
resolve: {
items: function () {
return $scope.items;
}
}
});
scope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). Defaults to $rootScope
所以我有点困惑为什么这不起作用:
我的 Angular 主页面有一个名为 "SearchCtrl" 的 ng-controller,它包含一堆用于将搜索发送到网络服务器的逻辑。
app.controller('SearchCtrl', ['$http','$scope', function($http,$scope) {
$scope.doAlert = function() {
console.log('search page alert inside searchresultsctrl');
}
这个控制器包含在我的搜索页面上,然后在页面下方的某处有另一个控制器 SearchSortModalCtrl,它将弹出一个模式并让用户做一些事情:
app.controller('SearchSortModalCtrl', function ($scope, $modal, $log) {
.....
var modalInstance = $modal.open({
templateUrl: '/modal-search-sort.html',
controller: 'SearchSortFormCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
连接到此控制器的是:
app.controller('SearchSortFormCtrl', ['$http','$scope','$rootScope','$modalInstance', function($http,$scope,$rootScope,$modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss();
};
$scope.doAlert2 = function() {
console.log('search page alert test2');
}
所以无论如何,我想做的是在模态表单中放置一个 ng-submit,当提交该表单时,它将在 SearchCtrl 上执行一些逻辑。
但如果我这样做
ng-submit="doAlert()"
在我的模式中,它不会工作或向 SearchCtrl 发送任何内容,但如果我将其更改为 doAlert2(),它当然会在 SearchSortFormCtrl 上 运行。我试过了
ng-submit="$parent.doAlert()"
但没有骰子,为了向您展示我正在努力达到什么水平,我什至尝试过
ng-submit="$parent.$parent.doAlert()"
那什么也没做。
我哪里做错了,或者我怎样才能让这个表单只在 SearchCtrl 中做一些事情?
由于您的控制器是 SearchCtrl
的子控制器,因此它的任何后代(独立作用域指令除外)将自动继承 doAlert
函数。在您的情况下,您没有在模态设置中使用 scope
选项,因此模态范围最终将是 $rootScope
而 angular ui 模态。您可以在控制器的设置中提供范围选项。所以:
要么设置 scope:$scope
,要么如果您不想使用模态控制器设置的属性污染当前控制器范围,请设置子范围,即 scope:$scope.$new()
.
var modalInstance = $modal.open({
templateUrl: '/modal-search-sort.html',
controller: 'SearchSortFormCtrl',
size: size,
scope: $scope, //Or $scope.$new()
resolve: {
items: function () {
return $scope.items;
}
}
});
scope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). Defaults to $rootScope