$rootScope.$broadcast on $rootScope.$on: RangeError: Maximum call stack size exceeded

Question

我想在 angular 中定义页面标题，如下所示：

一个标准 PageController :

angular.module('admin').controller('AdminController',
    function($scope) {

        // emit an event to rootscope
        $scope.$emit('setPageTitle','Administration');
    }
);

然后在 运行 块中：

angular.module('core').run(function($rootScope){
    $rootScope.$on('setPageTitle',function(evt,title){
        $rootScope.$broadcast('setPageTitle',title);   // The error is thrown from this line
    });
});

最终在 PageHeaderController 中：

angular.module('core').controller('PageHeaderController',
    function($scope) {

        $scope.$on('setPageTitle',function(evt, title){
            $scope.pageTitle = title;
        });
    }
);

这样，我不需要在每个 PageController 中注入 $rootScope，而只需注入经常用于其他任务的 $scope。

但是我在第二个代码块中上面标记的行中得到了这个错误

RangeError: Maximum call stack size exceeded

这里有什么问题吗？我看不出是什么原因导致无限循环，因为我想我只是做了这些步骤：

• 从child
发出
• 在 rootscope 中处理并广播到 children
• 在特定的句柄中 child

Answer 1

$rootScope.$on('setPageTitle',function(evt,title){
    $rootScope.$broadcast('setPageTitle',title);   // The error is thrown from this line
});

是这个原因吗？尝试给跟踪方向不同的事件名称。

Answer 2

将“setPageTitle”事件名称更改为其他名称应该可行，请这样尝试

angular.module('core').run(function($rootScope){
    $rootScope.$on('setPageTitle',function(evt,title){
        $rootScope.$broadcast('setPageTitleCtrl',title);   // The error is thrown from this line - changed 'setPageTitle' to 'setPageTitleCtrl'
    });
});

控制器：

angular.module('core').controller('PageHeaderController',
    function($scope) {

        $scope.$on('setPageTitleCtrl',function(evt, title){
            $scope.pageTitle = title;
        });
    }
)

Answer 3

这里的原因是$rootScope 有能力捕获它自己广播的事件。于是无限循环发生了。

Here's a very clear explanation on $rootScope's $emit, $broadcast, $on behavior