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

我有一个使用两个控制器的页面。一个与在许多不同页面上重用的标题关联，另一个与页面主体关联。标记看起来像：

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

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

我想将一个侦听器绑定到登录函数，这样每当单击与其关联的按钮时，就会在myPageController.js文件中调用另一个函数

---

如何在Angular中执行此操作？

最好的方法可能是从$rootScope中$broadcast一个事件，您的页面控制器使用$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
    });
}

---

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

例如：

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
    });
}

---

$rootScope.$广播速度相当慢。如果您只想让两个不相关的控制器通信，那么最好通过服务来实现。例如，请参见我的答案：

---

希望有帮助

$rootScope.$广播速度相当慢。如果您只想让两个不相关的控制器通信，那么最好通过服务来实现。例如，请参见我的答案：

希望有帮助