<ion-tab title="ACCOUNT" icon="ion-trophy" href="#/home/account" badge="levelBadge" badge-style="badge-assertive" on-select="enteringAccount()" on-deselect="leavingAccount()" ng-controller="hoMetabCtrl"> <ion-nav-view name="tab-account" animation="slide-left-right"></ion-nav-view> </ion-tab>
我想在其他范围内发生某些事情时更改levelBadge值.
在其他范围内,我有这个控制器(lessonCtrl).单击此视图上的按钮时,控制器在此控制器内调用此函数：
$scope.testBoardcast = function() {
MyFirebaseService.testBoardcast();
}
在MyFirebaseService(工厂)里面,我有这个功能：
function testBoardcast() {
$rootScope.$broadcast('level-up',2);
}
在我的主页模板hoMetabCtrl中,我正在听这样的升级事件：
$rootScope.$on('level-up',function(event,data) {
console.log ("App received level up boardcast: " + data);
$scope.levelBadge = parseInt(data,10);
});
但问题是,当我点击lessonCtrl上的按钮时,levelBadge没有得到更新,并且徽章也不会显示甚至控制台日志“App received level level up boardcast：”在我点击按钮后立即显示.
如果我只听这样的hoMetabCtrl范围：
$scope.$on('level-up',10);
});
单击lessonCtrl上的按钮时没有任何反应.
当我在lessonCtrl中以完全不同的状态单击按钮时,我不知道如何使levelBadge动态更改.
更新：这是我的ui路线：
.state('home',{
cache: false,abstract: true,url: "/home",templateUrl: "app/home/home.html",controller: 'hoMetabCtrl',onEnter: function($state,MyFirebaseService) {
var userId = MyFirebaseService.LoginUserId();
if (!userId) {
$state.go('auth.signin');
};
}
})
.state('home.courses',url: "/courses",views: {
"tab-courses": {
templateUrl: "app/home/courses.html"
}
}
})
.state('app',{
abstract: true,url: "/app",templateUrl: "app/layout/menu-layout.html",controller: 'AppCtrl'
})
.state('app.lesson',url: "/lesson/:id",views: {
'mainContent': {
templateUrl: "app/all/lesson-detail.html",controller: "lessonCtrl"
},}
})
所以家是一个抽象的状态.选项卡位于主页模板中. lessonCtrl实际上处于另一个名为App的抽象状态.他们不是合作伙伴或儿童范围.只有2个不同的范围.
解决方法
一种解决方案是使用服务.对服务进行更改,并在hoMetabCtrl中查看该服务.
在您的课程控制器调用中
Level.levelUp(1);
然后在您的hoMetab控制器中观看Level服务以进行更改
$scope.$watch(
function () {
return Level.currentLevel();
},function(newVal,oldVal) {
$scope.level = newVal;
}
);
这是一个设置这种结构的plunker：http://plnkr.co/edit/mAASNGNqr37k9n0RR89X?p=preview
编辑
查看此plunker,它设置了一个类似的视图层次结构：http://plnkr.co/edit/hyKECbyYAG8XzUh8x58K?p=preview.注意当您导航到应用程序和主页状态时,控制台日志如何打印init消息.
每次从主页更改为应用程序状态时,主控制器都会被取消实例化,并且应用程序控制器会被实例化(此答案在某种程度上解释了流程：angularjs controller instantiation,ui-router).
因此,当您进入应用程序状态时,家庭状态无法监听事件.单例服务将按您的意愿工作,因此我建议使用它而不是pub / sub方法.
