Angular aktualisiert Directive_AngularJS basierend auf dem Status des Dienstes

Angular JS (Angular.JS) ist eine Reihe von Frameworks, Vorlagen, Datenbindungen und umfangreichen UI-Komponenten, die zur Entwicklung von Webseiten verwendet werden. Es unterstützt den gesamten Entwicklungsprozess und stellt die Architektur von Webanwendungen ohne manuelle DOM-Manipulation bereit.

AngularJS wurde entwickelt, um die Mängel von HTML beim Erstellen von Anwendungen zu überwinden. HTML ist eine gute deklarative Sprache, die für die statische Textanzeige entwickelt wurde, aber beim Erstellen von WEB-Anwendungen ist sie schwach. Hier entsteht AngularJS, das die natürlichen Mängel von HTML ausgleicht und zum Erstellen von Webanwendungen verwendet wird.

TL;DR

In diesem Artikel werden drei Methoden zum Aktualisieren von Anweisungen basierend auf dem Status des Dienstes erläutert. Dabei handelt es sich um $watch-Ausdrücke, Ereignisübermittlung und vom Controller berechnete Eigenschaften.

Frage

Ich habe einen ReaderService, der einige Statusinformationen enthält (z. B. Verbindungsstatus und Akku). Jetzt muss ich eine Anweisung erstellen, um diese Zustände anzuzeigen. Da nur Daten vom ReaderService abgerufen werden müssen und keine externen Werte erforderlich sind, füge ich den Dienst direkt ein. Aber wie man ein Update durchführt, wird zum Problem.

Der Servicecode lautet wie folgt.

const STATUS = {
DETACH: 'DETACH',
ATTACH: 'ATTACH',
READY: 'READY'
}
class ReaderService {
constructor() {
this.STATUS = STATUS
// The status will be changed by some callbacks
this.status = STATUS.DETACH
}
}
angular.module('app').service('readerService', readerService)

Der Richtliniencode lautet wie folgt:

angular.module('app').directive('readerIndicator', (readerService) => {
const STATUS = readerService.STATUS
const STATUS_DISPLAY = {
[STATUS.DETACH]: 'Disconnected',
[STATUS.ATTACH]: 'Connecting...',
[STATUS.READY]: 'Connected',
}
return {
restrict: 'E',
scope: {},
template: `
<div class="status">
{{statusDisplay}}
</div>
`,
link(scope) {
// Set and change scope.statusDisplay here
}
}
})

Ich habe die folgenden Methoden ausprobiert, die im Folgenden einzeln vorgestellt werden.

Methode 1: $watch

Die erste Methode, die mir in den Sinn kommt, ist die Verwendung von „$watch“ in der Direktive, um „readerService.status“ zu überwachen. Da es sich nicht um ein Attribut des Direktivenbereichs handelt, müssen wir es in eine Funktion einschließen. Angular berechnet und vergleicht die alten und neuen Werte während des Dirty-Checks und der Rückruf wird nur ausgelöst, wenn sich der Status tatsächlich ändert.

// In directive
link(scope) {
scope.$watch(() => readerService.status, (status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
})
}

Diese Methode ist einfach und effizient genug. Solange der Code, der Änderungen in „readerService.status“ beinhaltet, eine Dirty-Checking auslöst, wird die Direktive automatisch aktualisiert. Der Dienst erfordert keine Codeänderung.

Wenn es jedoch mehrere Direktivenattribute gibt, die vom Dienststatus betroffen sind, ist der $watch-Code unklarer. Insbesondere wenn der durch $watch geänderte Wert andere Werte beeinflusst. Zum Beispiel:

// In directive
link(scope) {
scope.$watch(() => readerService.status, (status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
scope.showBattery = status !== STATUS.DETACH
})
scope.$watch('showBattery', () => {
// some other things depend on showBattery
})
}

Zu diesem Zeitpunkt wird der deklarative Programmierstil leichter zu verstehen sein, beispielsweise berechnete Eigenschaften in Ember oder Vue. Dies wird später besprochen.

Methode 2: $broadcast/$emit + $on

Die Idee ist, dass der Dienst jedes Mal, wenn sich der Status ändert, ein Ereignis sendet und die Direktive dann auf das Ereignis lauscht, um den Status zu ändern. Weil der Status möglicherweise aktualisiert wurde, als die Direktive gerendert wurde. Wir müssen also einen Anfangswert im Link berechnen.

Ich habe es zuerst mit $broadcast gemacht. Der Code lautet wie folgt:

// In service
setStatus(value) {
this.status = value
// Need to inject $rootScope
this.$rootScope.$broadcast('reader.statusChanged', this.status)
}
// In directive
link(scope) {
scope.statusDisplay = STATUS_DISPLAY[nfcReaderService.status]
scope.$on('reader.statusChanged', (event, status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
})
}

Aber ich habe sofort festgestellt, dass das UI-Update nach $broadcast immer mehr als 1 Sekunde dauert (aber der $on-Callback ist sehr schnell). Nach einigen Google-Recherchen haben wir herausgefunden, dass der Grund darin liegt, dass $broadcast an alle Bereiche auf niedrigerer Ebene sendet und nach Abschluss der Übertragung eine Dirty-Checking-Prüfung durchgeführt wird. Ein besserer Ansatz ist die Verwendung von $emit, wodurch Ereignisse nur nach oben weitergeleitet werden. Sie müssen jedoch $rootScope verwenden, um Ereignisse zu senden oder auf Ereignisse zu warten.

Der geänderte Code lautet wie folgt:

// In service
setStatus(value) {
this.status = value
// Use $emit instead of $broadcast
this.$rootScope.$emit('reader.statusChanged', this.status)
}
// In directive
link(scope) {
scope.statusDisplay = STATUS_DISPLAY[nfcReaderService.status]
// Use $rootScope instead of scope
$rootScope.$on('reader.statusChanged', (event, status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
})
}

Wenn Sie aus irgendeinem Grund $broadcast verwenden müssen, können Sie $digest oder $apply am Ende des $on-Rückrufs verwenden, um eine Dirty-Checking-Auslösung zu erzwingen, was auch den Zweck einer schnellen Aktualisierung der Benutzeroberfläche erreichen kann.

Methode 3: Controller + Eigenschaft

Ich persönlich denke, dass die ersten beiden Methoden das Problem lösen können, aber die Wartbarkeit des Codes ist nicht sehr gut. $watch ist sehr schwer zu verstehen, wenn Attribute miteinander in Beziehung stehen. $emit/$on erfordert das doppelte Schreiben einer Logik (bei der Initialisierung der Direktive und bei der Ausführung des Rückrufs). In Methode 1 habe ich erwähnt, dass deklarative Attribute manchmal einfacher zu verstehen sind als $watch. Bei dieser Methode wird ein Controller verwendet. Die Direktive kann ihren eigenen Controller als Datenquelle (oder Ansichtsmodell) festlegen, und wir können die zu berechnenden Eigenschaften als Eigenschaften des Controllers verwenden. Dadurch werden sie beim Dirty-Check automatisch berechnet.

// In directive
class ReaderController {
constructor($scope, readerService) {
this.readerService = readerService
}
get statusDisplay() {
return STATUS_DISPLAY[this.readerService.status]
}
}
return {
// ...
controller: ReaderController,
controllerAs: 'vm',
template: `
<div class="status">
{{vm.statusDisplay}}
</div>
}

Auf diese Weise kann der Großteil der Logik auf den Controller verlagert werden. Wenn keine DOM-Operation vorhanden ist, müssen wir nicht einmal die Link-Methode schreiben. Es ist nicht erforderlich, zusätzliche $watch und $on hinzuzufügen. Aufgrund der Eigenschaften des Dirty-Checkings werden an Vorlagen gebundene Eigenschaften häufig um ein Vielfaches berechnet. Die Eigenschaften müssen also sehr einfach sein. In den meisten Fällen wird dies kein Problem sein.

Der obige Inhalt ist die Angular-Update-Anweisung, die auf dem vom Herausgeber eingeführten Status des Dienstes basiert. Ich hoffe, dass er für alle hilfreich ist!