angularjs – $rootScope.$factory在工厂中无法更改其他$scope中
我有一个家庭模板(离子)有一个像这样的标签:
<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个不同的范围. 解决方法
我需要看到你的ui-router配置($stateProvider)来进一步调试你的代码没有按预期工作的原因.这很可能是因为在调用$broadcast时homeSabCtrl没有被实例化.
一种解决方案是使用服务.对服务进行更改,并在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方法. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |