在不同的控制器中为函数添加监听器 - Angular JS

Question

我有一个使用两个控制器的页面.一个与标题相关联(在许多不同的页面上重复使用),另一个与页面主体相关联.加价看起来像:

<div id = 'header' ng-controller = 'headerController' >
    <div id = 'login-button' ng-click = 'login()'>
        Login
    </div>
</div>

<div id = 'body' ng-controller = 'myPageController'>
     ....
</div>

控制器分别在两个单独的JS文件中定义:

headerController.js
myPageController.js

我想将一个监听器绑定到该login()函数,以便每当单击与其关联的按钮时,在该myPageController.js文件中调用另一个函数.

我将如何在Angular中执行此操作？

Answer 1

可能最好的方法是$broadcast()从$rootScope页面控制器处理的事件中使用$scope.$on().

例:

headerController.js:

function headerController($scope, $rootScope) {
     $scope.login = function () {
         $rootScope.$broadcast('login');
     };
}

myPageController.js

function myPageController($scope) {
    $scope.$on('login', function () {
        // handle login event here
    });
}