调用方法从一个控制器到角度js中的另一个控制器

Question

我想调用从一个控制器到另一个控制器的方法。 有两个名为“header”和“mainContent”的控制器。 需要在“头控制器”中调用“触发器方法”，在mainController中成功调用“结果方法”。
如果该方法调用该方法应该隐藏该段落。

<div ng-controller="header">
  <p ng-show="msg">Content</p>
</div>
<div ng-controller="mainContent">
</div>


var module = angular.module("sourceViewer", ['ui.router']);
//header controller
module.controller('header', function ($scope, $location) {
      $scope.msg=true;
       $scope.trigger= function(data) { //This method should be called after the result method called in the mainContent Controller
            $scope.$on('UPDATE_CHILD', function() {
             if(data)
             $scope.msg=false;
            });

       }

});

// mainContent controller
module.controller('mainContent', function ($scope, $location, dataService) {

    $scope.user = dataService.user;
    $scope.signIn = function (user) {

        var result = dataService.login(user);
        result.success(function (data) {
            if (data.message== "success") {
                $scope.$broadcast('UPDATE_CHILD');
             //From here I want to call trigger method of header controller
            } 
        })
    };



});

Answer 1

你试过这个吗？

module.controller('header', ['$scope', '$location', '$rootScope', function ($scope, $location, $rootScope) {
              $scope.msg=true;
               $scope.trigger= function(data) { 
                  if(data)
                  $scope.msg=false;
               };

               $rootScope.$on('event:fire', $scope.trigger);

        }]);

        // mainContent controller
        module.controller('mainContent', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {

            $scope.user = dataService.user;
            $scope.signIn = function (user) {

                var result = dataService.login(user);
                result.success(function (data) {
                    if (data.message== "success") {
                      $rootScope.$broadcast('event:fire');
                    } 
                })
            };
    }]);

Answer 2

您可以使用$ rootScope：

<div ng-controller="header">
    <p ng-show="$root.header.msg">Content</p>
</div>
<div ng-controller="mainContent">
</div>

var module = angular.module("sourceViewer", ['ui.router']);
//header controller
module.controller('header', function ($rootScope,$scope, $location) {
  $rootScope.header.msg = true;
});

// mainContent controller
module.controller('mainContent', function ($rootScope,$scope, $location, dataService) {

$scope.user = dataService.user;
$scope.signIn = function (user) {

    var result = dataService.login(user);
    result.success(function (data) {
        if (data.message== "success") {
         $rootScope.header.msg = true;
        } 
    })
};
});

Answer 3

在下面的代码中，您可以看到headerController在mainController中调用alert

myApp = angular.module("myApp",[]);

myApp.service("myService", function(){
    showAlertBool = false;
    return {
        showAlert: function (value) {
               showAlertBool = value;
        },

        canShowAlert: function () {
            return showAlertBool;
        }
    }
});

myApp.controller("headerController", function($scope, myService){
    console.log(myService);
    $scope.clickHandler = function(){
        myService.showAlert(true);
    }
});

myApp.controller("mainController", function($scope, myService){
    console.log(myService);
    $scope.getServiceValue = function(){
        return myService.canShowAlert();
    }

    $scope.$watch("getServiceValue()", function(newValue, oldValue){
        if(newValue === true && newValue !== oldValue){
            myService.showAlert(false);
            alert("I can show Alert now!!!");
        }
    });
});

对于工作代码，你可以去这里