angularjs - $on 只在一个 Controller 上被调用

Question

我有一个 Controller ，它有一个名为changeSafe 的事件。当此事件被触发时，我希望其他 Controller 能够监听

secure.controller('wrapperCtrl', function ($scope, $rootScope, storeFactory, safeFactory) {    
    $scope.changeSafe = function (safeId) {
        $scope.loading = true;
        safeFactory.setSafe(safeId).then(function (safeData) {
            $scope.safe = safeData;
            $scope.loading = false;
            $rootScope.$broadcast('changeSafe', safeData);
        });
    }
});

加载的第一个页面称为 dashboard，当我添加页面下方的内容时，如我所料，使用 $scope.safe 重新绘制。

secure.controller('dashboardCtrl', function ($scope, $rootScope, storeFactory, safeFactory) {    
    $scope.$on('changeSafe', function (event, arg) {        
        bindSafe(arg.safeId);
    }); 
}); 

我的历史 Controller 上有几乎完全相同的东西

secure.controller('historyCtrl', function($scope, $rootScope, storeFactory, safeFactory) {
    $scope.$on('changeSafe', function (event, arg) {        
       bindHistory(arg.safeId);
    }); 
});

这是我在config部分

secure.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/history', {
            templateUrl: '/Angular/History/history.html',
            controller: 'historyCtrl'
        })
    .otherwise({
        templateUrl: '/Angular/Dashboard/dashboard.html',
        controller: 'dashboardCtrl'
    });
}]);

每当我单击 wrapperCtrl 中的按钮时，只有 $scope.$on 在 dashboardCtrl 中触发。谁能看出为什么 $scope.$on 没有从 historyCtrl Controller 中触发？我也不清楚为什么当我不再在那个 View 上时它会从 dashboardCtrl 调用。

当我单步执行代码时，我实际上看到 $rootScope.$on('changeSafe') 在历史页面和仪表板页面上被多次调用。我不明白为什么它会将 View 改回仪表板

Answer 1

我不确定我是否完全了解您的问题，但我最好的猜测是您遇到了加载顺序问题，并且事件在订阅初始化之前就已广播。

---

首先，为了让自己省去很多麻烦，对 Event Handling in AnguarJS 有一个透彻的理解很重要。 :

• 了解订阅 $rootScope.$on 与订阅的区别$scope.$on
• 了解使用 $broadcast 与 $emit on 发布的区别$rootScope 与 $scope

从评论来看，您可能一直在使用 $rootScope.$on，当您的 Controller 被销毁时它不会被清除(与指令相同):

var changeSafeListnerUnbindFunction = $rootScope.$on('changeSafe', funciton() { //... });

$scope.$on('$destroy', changeSafeListnerUnbindFunction);

鉴于您的用例，在子作用域上注册监听器将获取从 $rootScope.$broadcast 发布的事件(它将顶层向下传递到每个子作用域)。您可能遇到加载顺序问题？