无法从其他控制器调用$on

Question

(function(app) {

app.config(function($stateProvider, $httpProvider, $urlRouterProvider) {
//region Registering States
$urlRouterProvider.otherwise('/home');
var dashboard = {
name: 'home',
url: '/home',
templateUrl: 'home.html',
controller: 'homeCtrl'
};
var home = {
name: 'profile',
url: '/profile',
templateUrl: 'profile.html',
controller: 'profileCtrl'
};

$stateProvider.state(dashboard);
$stateProvider.state(home);
//endregion

});
app.controller('homeCtrl', ['$rootScope','$scope', function($rootScope,$scope) {
$rootScope.pageTitle = "home";
$scope.callEvent = function(){
$rootScope.$broadcast('newEvent',"data");
}

}]);
console.log('called');
}(angular.module('app', ['ui.router'])));

2'nd 控制器：

(function(app) {
app.controller('profileCtrl', ['$rootScope','$scope', function($rootScope,$scope) {
$rootScope.pageTitle = "profile";
$rootScope.$on('newEvent',function(ev,data){
alert('Event fired from home');
});

$scope.$on('newEvent',function(ev,data){
alert('Event fired from home');
});
}]);
}(angular.module('app')));

带 2 个控制器的应用程序：

1 个控制器：使用 $broadcast 触发事件

2 控制器：捕获从第一个控制器触发的事件。 但无法做到这一点。

注意：如果 html 页面加载一次(第 2 个控制器(，则触发$on事件，否则它不会侦听任何事件。

为了更好地理解，我创建了一个 plunkr

请先查看代码

@vojta

谢谢

Answer 1

问题是您正在通过状态加载控制器。这意味着它们仅在状态变为活动状态(即导航到 html(后初始化。

如果将控制台日志添加到 profileCtrl，则会看到在页面处于活动状态之前不会触发该日志。

Answer 2

如果未调用 Angular 不会加载控制器。 把它想象成一个单例对象，在你尝试运行它之前，它不会初始化。

在您的情况下，您为特定路由设置了一个控制器，这意味着它只会在您转到其路由地址后运行。

你真正想做的是有一些指令角度指令 这将控制您将在主页上加载的菜单栏，也许每隔一页加载一次。 对于主页，您应该有一个不同的控制器，该控制器仅在用户在页面上时才处于活动状态。

作为旁注，不要假设"主页"控制器在您离开主页后将可用(Angular destroy(。