Home > Article > Web Front-end > How much do you know about AngularJS event publishing? Now this article tells you what you want to know about angularjs event details.
This article mainly introduces the details about angularjs event release. Do you want to know more? Then hurry up and read it, now let’s read this article together
Unread message reminder:
When an appliance user or technical institution When issuing new opinions on the application for inspection and calibration of non-compulsory inspection equipment, the other party needs to be notified. The backend is very simple. This article mainly solves the problems encountered in the frontend.
This is the command to count unread messages left over from my messages, using cache superCache
.
You should be able to find this if...else
problem at a glance. The first request puts the data in the cache, and then it keeps fetching it from the cache. This is definitely There's a problem! It turns out that there are 1
messages, and then click to view, and then this command still fetches data from the cache, and one message is displayed.
angular.module('webappApp') .directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) { return { template: '', restrict: 'E', // 元素 link: function postLink(scope, element) { // 判断缓存中是否存在未读消息数量 if (typeof superCache.get('unReadMessageCount') === 'undefined') { // 获取当前用户的所有未读收件消息 ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) { // 存入缓存 superCache.put('unReadMessageCount', data.totalElements); // 显示文本信息 element.text(superCache.get('unReadMessageCount')); }); } else { // 显示文本信息 element.text(superCache.get('unReadMessageCount')); } } }; });
If the cache is not cleared when logging out, the next user will use the cache left by the previous user when logging in, causing information Prompt error.
The following figure shows the difficulty of this implementation.
The user has an unread message. When the user clicks to read the message, the status of the message is set to read, and then the number of unread messages in the upper right corner is modified at the same time. But the click event occurs in the controller, and the message is an additional instruction, and the two have no connection. (If you want to learn more, go to the PHP Chinese websiteangularjs reference manual column to learn)
##AngularJS## The essence of # is Scope
, which are two Scope
. The page content is our controller Scope
, and the message in the upper right corner is our unread message. CommandScope
. If it is a simple parent-child
relationship, we can pass parameters from the controller to the command. The parameter watch
of the command will cause the command to change according to the change of the parameter by the controller. respond. But these two Scope
have nothing to do with each other, what should we do?
Event Release
inScope
can Post an event. $broadcast(name, args);
Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.
, notifying the registered Scope
. $emit(name, args);
Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.
, except that this one is used to publish events upward. $on(name, listener);
Listens on events of a given type.
Code implementation
relationship between these two controllers and instructions, whether it is upward or downward possible Can't receive it. Here directly use
to publish the event downward to ensure that all Scope
can obtain the event. Avoid having to consider the relationship between the current Scope
and the destination Scope
. <pre class="brush:php;toolbar:false">// 广播发布reloadMessageCount事件,重新计算未读消息数量
$rootScope.$broadcast('reloadMessageCount');</pre>
Considering the responsibilities between each layer, I think: event publishing should be in the method controller and should not be placed in
, Service
Just waiting to be called by others, it should not be coupled with other files, otherwise it will be difficult to change. $on
to listen for event release, and execute the corresponding logic to redisplay the number of unread messages in the upper right corner. <pre class="brush:php;toolbar:false">angular.module('webappApp')
.directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) {
return {
template: '<b>{{ count }}</b>',
restrict: 'E', // 元素
link: function postLink(scope) {
var self = this;
self.init = function() {
self.computeMessageCount();
};
// 计算未读消息数量
self.computeMessageCount = function() {
// 判断缓存中是否存在未读消息数量
if (angular.isUndefined(superCache.get('unReadMessageCount'))) {
// 获取当前用户的所有未读收件消息
ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) {
// 存入缓存
superCache.put('unReadMessageCount', data.totalElements);
// 显示
scope.count = superCache.get('unReadMessageCount');
});
} else {
scope.count = superCache.get('unReadMessageCount');
}
};
// 处理reloadMessageCount事件的处理逻辑
scope.$on('reloadMessageCount', function() {
// 清除缓存
superCache.remove('unReadMessageCount');
// 计算未读消息数量
self.computeMessageCount();
});
// 初始化
self.init();
}
};
});</pre>
angularjs Learning Manual column to learn more about angularjs. If you have any questions, you can leave a message below. 【Editor’s Recommendation】
Can you use angularjs filter? Let’s look at the detailed explanation of angularjs filters#How to use expressions in angularjs? Examples of using expressions in angularjsThe above is the detailed content of How much do you know about AngularJS event publishing? Now this article tells you what you want to know about angularjs event details.. For more information, please follow other related articles on the PHP Chinese website!