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.

Historical legacy

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'));
                }
            }
        };
    });

Function implementation

Clear cache when logging out

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.

Re-execute the instruction while reading

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

Scope

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

Checked the relevant information,

AngularJS

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.

Distributes an event downwards to all its children

Scope

, notifying the registered Scope . $emit(name, args);

Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.

is similar to

$broadcast

, except that this one is used to publish events upward. $on(name, listener);

Listens on events of a given type.

Listen to an event of a given type.

Code implementation

$rootScope

Considering the

Scope

relationship between these two controllers and instructions, whether it is upward or downward possible Can't receive it. Here directly use

$rootScope

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

, Service Just waiting to be called by others, it should not be coupled with other files, otherwise it will be difficult to change. $on

Refactor the instruction, use

$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: '&lt;b&gt;{{ count }}&lt;/b&gt;',             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>

The above is the entire content of this article. If you want to read more, go to the PHP Chinese website

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 angularjs

The 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!