如何在 Angularjs 中不同文件的控制器之间传递数据

Question

我有一个页面 Controller_1
Controller_1 在我们称为 Controller_2
然后 Controller_2 打开另一个模式，它在我们称为 Controller_3

所以我们有：

Controller_1 --打开模式--> Controller_2 --打开模式--> Controller_3

当我用 Controller_3 关闭模式时，我想将一个值传递给 Controller_1。

我的代码：

Controller_1 使用 Controller_2

打开模式

app.controller("Controller_1", ['$scope', '$http', '$modal', 
function ($scope, $http, $modal) {

$scope.openModal_1 = function () {

    var modalInstance = $modal.open({
        templateUrl: '/SomeFolder/FileWithController_2',
        controller: 'Controller_2',
    });
}

}]);

Controller_2 使用 Controller_3

打开模式

app.controller("Controller_2", ['$scope', '$http', '$modalInstance', '$modal',
function ($scope, $http, $modalInstance, $modal) {

$scope.SaveSomething = function () {

            $http.post(url, obj)
                .success(function (data) {
                        var modalInstance = $modal.open({
                        templateUrl: '/SomeFolder/FileWithController_3',
                        controller: 'Controller_3',
                        }
                    });

                }).error(function () {

                });
        };
    }]);

Controller_3 保存一些东西然后关闭并将一些数据传递给 Controller_1

app.controller("Controller_3", ['$scope', '$http', '$modalInstance',
function ($scope, $http, $modalInstance) {        

   $scope.SaveSomething = function () {

                    $http.post(url, obj)
                        .success(function (data) {

                             ... pass some code to Controller_1 and close this modal.

                            });

                        }).error(function () {

                        });
                };
            }]);

假设一切正常，我只想将一些数据从 Controller_3 传递到 Controller_1。

我的问题是：如何将数据从 Controller_3 传递到 Controller_1?

我已经尝试在打开模式时通过 $scope，如下所示：

//from Controller_1 to Controller_2

     var modalInstance = $modal.open({
                templateUrl: '/SomeFolder/FileWithController_2',
                controller: 'Controller_2',
                scope: $scope,
            });

在这种情况下，它仅适用于 Controller_2，因此对 $scope 的任何修改都会影响 Controller_1，但如果我对 [=60 执行相同的操作，它的工作方式就不一样了=]

我尝试了 $emit 和 $on 但它也不起作用，因为它们不是 parent 和 child 这样的：

<div ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl"></div>
</div>

它们是不同文件中的完全不同的控制器。

Answer 1

在 Angular doc

中查看 $parent

声明模态实例，

 var modalInstance = $modal.open({
            templateUrl: '/SomeFolder/FileWithController_3',
            controller: 'Controller_3',
            scope: $scope.$parent,
        });

因此，您基本上可以在 controller_3 中从 controller_1 调用方法或编辑属性。

app.controller("Controller_3", ['$scope', '$http', '$modalInstance',
function ($scope, $http, $modalInstance) {        

app.controller("Controller_3", ['$scope', '$http', '$modalInstance',
function ($scope, $http, $modalInstance) {        

   $scope.SaveSomething = function () {    
      $http.post(url, obj)
           .success(function (data) {
                $scope.$parent.modethodToCall(data);
           })
           .error(function () {});
   };
}]);

我认为您必须添加另一个 $parent，因为 $modal 创建它自己的子 $scope。如果有人可以确认？

我个人不会推荐使用父级 properties/methods。在我的项目中，我使用参数和 return 创建模态闭包对象的模态实例。（参见 Angular ui doc 中的 $modal）

$modalInstance.close(data);

Answer 2

您可以使用事件并收听这些事件。

看下面的例子：

app.controller('controller1', ['$scope','$rootScope', controller1]);

function controller1($scope, $rootScope){
    $scope.$on('informController1', informController1);

    function informController1(information){
        //information displayed on the controller 1 related view
        $scope.ctrl1Information = information;
    }
}

app.controller('controller2', ['$scope','$rootScope', controller2]);

function controller2($scope, $rootScope){
    //controller2 logic
}

app.controller('controller3', ['$scope','$rootScope', controller3]);

function controller3($scope, $rootScope){
    $scope.$on('informController3', informController3);

    function informController3(information){
        //information displayed on the controller 3 related view
        $scope.ctrl3Information = information;
    }

    function closeModal(){
        //close modal code...

        $rootScope.$broadcast('informController1', $scope.ctrl3Information);
    }
}

要使这种方法起作用，您必须确保在触发事件时加载了控制器。

如何在 Angularjs 中不同文件的控制器之间传递数据

How to pass data between controller on different files in Angularjs

angularjs

angular-ui

angularjs-scope