如何更新AngularJS应用程序中的导航栏标记

Question

我的AngularJS + Bootstrap应用程序在导航栏中包含一个徽章，旨在为用户提供等待他们注意的消息计数。我已将导航栏包装在与包含导航栏的div关联的自己的NavController中。

我的应用程序的主要功能由通过路由提供程序呈现的其他控制器处理，这样每个页面都应该有两个活动控制器：NavController和特定于该页面的控制器（例如编辑）。消息由这些其他控制器生成并排队。我的问题是我无法更新导航栏徽章以反映新计数。

我可以＆＃34;作弊＆＃34;并使用Jquery直接更新DOM，但这似乎不对。

＆＃34;正确的方式＆＃34;当您需要更新显示以响应应用程序中其他位置的状态更改时，管理Angular中的导航栏状态？

Answer 1

我可以告诉你管理全球状态的方法。

首先是使用$emit或$broadcast举起活动。我不确定你的观点是如何设置的，但$ rootScope。$ broadcast只适用于整个应用程序中的事件广播。您可以引发表示发生了什么的事件，例如生成了新消息，更新了消息计数。就像是 $rootScope.$broadcast('MessageCountUpdated', {messageCount:30});

使用$scope.$on抓住它。

另一种方法是使用服务，该服务在任何给定时间跟踪消息，在队列中提供任何视图可以绑定的有用度量。

module.factory('MessageQueue',function(){
  var service={};
  service.queue=function(msg) {};
  service.dequeue=function() {};
  service.messageCount=function(){};
});

上述服务可以在任何地方注入，并且可以绑定到视图。