Que savez-vous de la publication d'événements AngularJS ? Cet article vous explique maintenant ce que vous voulez savoir sur les détails des événements AngularJS.

Cet article présente principalement les détails de la sortie de événement angulairejs Voulez-vous en savoir plus ? Alors dépêchez-vous et jetez un œil, lisons maintenant cet article ensemble

Rappel de message non lu :

Quand un utilisateur d'appareil ou un établissement technique Quand émettant de nouveaux avis sur la demande d'inspection et d'étalonnage d'équipements d'inspection non obligatoires, l'autre partie doit en être informée. Le backend est très simple Cet article résout principalement les problèmes rencontrés dans le frontend.

Héritage historique

Il s'agit d'une commande pour compter les messages non lus laissés par mes messages, en utilisant le cache superCache .

Vous devriez pouvoir trouver ce if...else problème en un coup d'œil. La première requête met les données dans le cache, puis elle continue de les récupérer dans le cache. Il doit y avoir un problème ! Il s'avère qu'il y a 1 messages, puis cliquez pour afficher, puis cette commande récupère toujours les données du cache et un message s'affiche.

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

Implémentation de la fonction

Vider le cache lors de la déconnexion

Si le cache n'est pas vidé lors de la déconnexion, l'utilisateur suivant utilisera le cache laissé par l'utilisateur précédent lors de la connexion. Provoque une erreur d’invite d’informations.

Réexécutez la commande en lisant

La figure suivante montre la difficulté de cette implémentation.

L'utilisateur a un message non lu. Lorsque l'utilisateur clique pour lire le message, le statut du message est défini sur lu, puis le nombre de messages non lus dans le coin supérieur droit est modifié en même temps. . Mais l'événement click se produit dans le contrôleur et le message est une instruction supplémentaire, et les deux n'ont aucune connexion. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois colonne Angularjs Reference Manual pour en savoir plus) L'essence de

AngularJS est Scope, ce sont deux Scope, le contenu de la page est notre contrôleur Scope et le message dans le coin supérieur droit est notre commande de message non lu Scope.

S'il s'agit d'une simple relation parent-enfant Scope, nous pouvons transmettre des paramètres du contrôleur à la commande. Le paramètre de la commande watch fera répondre la commande en fonction des modifications du paramètre. par le contrôleur. Mais ces deux-là Scope n'ont rien à voir l'un avec l'autre, que faut-il faire ?

Publication d'événements

Après avoir vérifié les informations pertinentes, AngularJS peut publier des événements dans Scope.

$broadcast(name, args);

Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.

distribue un événement à tous ses enfants Scope, en informant les inscrits Scope.

$emit(name, args);

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

est similaire à $broadcast, sauf que celui-ci est utilisé pour publier des événements vers le haut.

$on(name, auditeur);

Listens on events of a given type.

Écouter un événement d'un type donné.

Implémentation du code

$rootScope

Considérant la Scope relation entre ces deux contrôleurs et instructions, ni vers le haut ni vers le bas ne peuvent être reçus.

Ici, utilisez $rootScope pour publier l'événement directement afin de vous assurer que tous les Scope peuvent obtenir l'événement. Évitez de penser à la relation entre l'actuel Scope et le but Scope.

// 广播发布reloadMessageCount事件，重新计算未读消息数量
$rootScope.$broadcast('reloadMessageCount');

En raison des responsabilités entre chaque couche, je pense : la publication d'événements doit être dans le contrôleur de méthode et ne doit pas être placée dans Service attend juste d'être appelée par d'autres. , ne doit pas être couplé avec d’autres fichiers, sinon il sera difficile de le modifier. Service

$on

Refactorisez l'instruction, utilisez

pour écouter la publication d'événements et exécutez la logique correspondante pour réafficher le nombre de messages non lus dans le coin supérieur droit. $on

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

Ce qui précède représente l'intégralité du contenu de cet article. Si vous souhaitez en savoir plus, rendez-vous sur la colonne Angularjs Learning Manual du site Web PHP chinois pour en savoir plus sur Angularjs. Connaissance. Si vous avez des questions, vous pouvez laisser un message ci-dessous.

【Recommandation de l'éditeur】

Pouvez-vous utiliser le filtre AngularJS ? Regardons l'explication détaillée des filtres Angularjs

Comment utiliser les expressions dans Angularjs ? Exemples d'utilisation d'expressions angulairesJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!