Wie viel wissen Sie über AngularJS-Ereignisveröffentlichung? In diesem Artikel erfahren Sie, was Sie über AngularJS-Ereignisdetails wissen möchten.

In diesem Artikel werden hauptsächlich die Details zur Veröffentlichung von angularjs event vorgestellt. Dann beeilen Sie sich und werfen Sie einen Blick darauf. Lassen Sie uns diesen Artikel jetzt gemeinsam lesen Bei der Abgabe neuer Stellungnahmen zum Antrag auf Inspektion und Kalibrierung von nicht obligatorischen Inspektionsgeräten muss die andere Partei benachrichtigt werden. Das Backend ist sehr einfach. Dieser Artikel löst hauptsächlich die im Frontend auftretenden Probleme.

Historisches Erbe

Dies ist ein Befehl zum Zählen ungelesener Nachrichten, die von meinen Nachrichten übrig geblieben sind, mithilfe des Caches

. Sie sollten dieses Problem auf den ersten Blick erkennen können. Die erste Anfrage legt die Daten im Cache ab und ruft sie dann immer wieder aus dem Cache ab. Da muss etwas falsch sein. Es stellt sich heraus, dass

Nachrichten vorhanden sind. Klicken Sie dann zum Anzeigen. Anschließend ruft dieser Befehl weiterhin Daten aus dem Cache ab und zeigt eine Nachricht an.

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

Funktionsimplementierung

superCacheCache beim Abmelden leeren

Wenn der Cache beim Abmelden nicht geleert wird, verwendet der nächste Benutzer den Cache, den der vorherige Benutzer beim Abmelden hinterlassen hat in, was zu einem Informations-Prompt-Fehler führt. if...else1

Führen Sie den Befehl beim Lesen erneut aus

Die folgende Abbildung zeigt die Schwierigkeit dieser Implementierung.

Der Benutzer hat eine ungelesene Nachricht. Wenn der Benutzer klickt, um die Nachricht zu lesen, wird der Status der Nachricht auf „Lesen“ gesetzt und gleichzeitig wird die Anzahl der ungelesenen Nachrichten in der oberen rechten Ecke geändert . Aber das Klickereignis tritt im Controller auf und die Nachricht ist eine zusätzliche Anweisung, und die beiden haben keine Verbindung. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte AngularJS-Referenzhandbuch auf der chinesischen PHP-Website, um mehr zu erfahren.) Die Essenz von

ist

, das sind zwei

, der Seiteninhalt ist unser Controller und die Nachricht in der oberen rechten Ecke ist unser ungelesener Nachrichtenbefehl .

Wenn es sich um eine einfache Eltern-Kind-Beziehung

handelt, können wir Parameter vom Controller an den Befehl übergeben. Der Parameter des Befehls AngularJS sorgt dafür, dass der Befehl entsprechend den Änderungen in den Parametern reagiert des Controllers. Aber diese beiden Scope haben nichts miteinander zu tun, was sollen wir tun? ScopeScopeScope

ScopewatchEreignisfreigabeScope

Nach Prüfung der relevanten Informationen kann

Ereignisse in freigeben. $broadcast(name, args);

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

verteilt ein Ereignis an alle seine untergeordneten Elemente

und benachrichtigt registrierte

. AngularJSScope$emit(name, args);

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

ähnelt

, außer dass dieses verwendet wird, um Ereignisse nach oben zu veröffentlichen.

Scope$on(name, listener);Scope

Listens on events of a given type.

Hört auf ein Ereignis eines bestimmten Typs.

Code-Implementierung

$broadcast$rootScope

Angesichts der

Beziehung zwischen diesen beiden Controllern und Anweisungen darf weder nach oben noch nach unten empfangen werden.

Verwenden Sie hier

, um die Veranstaltung direkt zu veröffentlichen, um sicherzustellen, dass alle

die Veranstaltung erhalten können. Vermeiden Sie es, über die Beziehung zwischen dem aktuellen

und dem Zweck

nachzudenken.

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

ScopeAufgrund der Verantwortungsbeziehung zwischen den einzelnen Ebenen denke ich: Die Veröffentlichung von Ereignissen sollte im Methodencontroller erfolgen und nicht in platziert werden, das nur darauf wartet, von anderen aufgerufen zu werden. Nein Es sollte eine Kopplungsbeziehung mit anderen Dateien bestehen, da es sonst schwierig ist, sie zu ändern.

$rootScope$onScopeScopeRefaktorieren Sie die Anweisung, verwenden Sie Scope, um auf die Veröffentlichung von Ereignissen zu warten, und führen Sie die entsprechende Logik aus, um die Anzahl der ungelesenen Nachrichten in der oberen rechten Ecke erneut anzuzeigen.

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

ServiceDas Obige ist der gesamte Inhalt dieses Artikels. Wenn Sie mehr lesen möchten, besuchen Sie die Spalte „AngularJS-Lernhandbuch“ der PHP-Chinese-Website, um mehr über AngularJS zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen. Service

【Empfehlung des Herausgebers】

Können Sie den AngularJS-Filter verwenden? Schauen wir uns die detaillierte Erklärung der AngularJS-Filter an$on

Wie verwende ich Ausdrücke in AngularJS? Anwendungsbeispiele für AngularJS-Ausdrücke

Das obige ist der detaillierte Inhalt vonWie viel wissen Sie über AngularJS-Ereignisveröffentlichung? In diesem Artikel erfahren Sie, was Sie über AngularJS-Ereignisdetails wissen möchten.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!