javascript - Angularjs将模态 Controller 内部的表单传递给模态外部的ng-controller

Question

所以我有点困惑为什么这不起作用:

我的 Angular 主页面有一个名为“SearchCtrl”的 ng Controller ，其中包含一堆用于将搜索发送到网络服务器的逻辑。

app.controller('SearchCtrl', ['$http','$scope', function($http,$scope) {

$scope.doAlert = function() {
    console.log('search page alert inside searchresultsctrl');
}

这个 Controller 包含在我的搜索页面上，然后页面下方的某个地方有另一个 Controller ，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;
            }
        }
    });

连接到此 Controller :

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 中做一些事情？

Answer 1

由于您的 Controller 是 SearchCtrl 的子 Controller ，因此它的任何后代(独立作用域指令除外)都将自动继承 doAlert 函数。在您的情况下，您没有在模态设置中使用 scope 选项，因此模态范围最终将是 Angular ui modal 所做的 $rootScope 。您可以在 Controller 的设置中提供范围选项。所以:

设置 scope:$scope 或者如果您不想使用模态 Controller 设置的属性污染当前 Controller 范围，请设置子范围，即 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;
        }
    }
});

Documentation link

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