Angular met à jour la directive_AngularJS en fonction de l'état du service

Angular JS (Angular.JS) est un ensemble de frameworks, de modèles, de liaisons de données et de composants d'interface utilisateur riches utilisés pour développer des pages Web. Il prend en charge l'ensemble du processus de développement et fournit l'architecture des applications Web sans manipulation manuelle du DOM.

AngularJS est conçu pour surmonter les lacunes du HTML dans la création d'applications. HTML est un bon langage déclaratif conçu pour l'affichage de texte statique, mais il est faible lorsqu'il s'agit de créer des applications WEB. AngularJS voit le jour ici, compensant les lacunes naturelles du HTML et utilisé pour créer des applications Web.

TL;DR

Cet article explique trois méthodes de mise à jour des directives en fonction de l'état du service. Il s'agit d'expressions $watch, de livraison d'événements et de propriétés calculées par le contrôleur.

Question

J'ai un readerService qui contient certaines informations d'état (telles que l'état de la connexion et la batterie). Maintenant, je dois créer une directive pour afficher ces états. Parce qu'il n'a besoin que d'obtenir des données de readerService et ne nécessite aucune valeur externe, j'y injecte directement le service. Mais comment mettre à jour devient un problème.

Le code de service est le suivant.

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)

le code de la directive est le suivant :

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

J'ai essayé les méthodes suivantes, qui sont présentées une par une ci-dessous.

Méthode 1 : $watch

La première méthode qui me vient à l'esprit est d'utiliser $watch dans la directive pour surveiller readerService.status. Comme ce n'est pas un attribut de la portée de la directive, nous devons l'envelopper dans une fonction. Angular calculera et comparera les anciennes et les nouvelles valeurs lors de la vérification sale, et le rappel ne sera déclenché que si l'état change réellement.

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

Cette méthode est assez simple et efficace. Tant que le code impliquant des modifications dans readerService.status déclenche une vérification sale, la directive sera automatiquement mise à jour. le service ne nécessite aucune modification du code.

Mais s'il existe plusieurs attributs de directive affectés par l'état du service, alors le code $watch sera plus obscur. Surtout lorsque la valeur modifiée par $watch affectera d'autres valeurs. Par exemple :

// 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
})
}

À l'heure actuelle, le style de programmation déclarative sera plus facile à comprendre, comme la propriété calculée dans Ember ou Vue. Ceci sera discuté plus tard.

Méthode 2 : $broadcast/$emit + $on

L'idée est que le service envoie un événement à chaque fois que l'état change, puis la directive écoute l'événement pour changer d'état. Parce que le statut peut avoir été mis à jour lorsque la directive est rendue. Il faut donc calculer une valeur initiale en lien.

Je l'ai d'abord fait avec $broadcast. Le code est le suivant :

// 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]
})
}

Mais j'ai immédiatement découvert que la mise à jour de l'interface utilisateur après $broadcast prend toujours plus d'une seconde (mais le rappel $on est très rapide). Après quelques recherches sur Google, nous avons découvert que la raison en est que $broadcast est diffusé vers toutes les étendues de niveau inférieur, puis une vérification sale est effectuée une fois la diffusion terminée. Une meilleure approche consiste à utiliser $emit, qui transmettra uniquement les événements vers le haut, mais vous devez utiliser $rootScope pour envoyer des événements ou écouter des événements.

Le code modifié est le suivant :

// 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]
})
}

Si vous devez utiliser $broadcast pour une raison quelconque, vous pouvez utiliser $digest ou $apply à la fin du rappel $on pour forcer le déclenchement d'une vérification sale, ce qui peut également atteindre l'objectif de mise à jour rapide de l'interface utilisateur.

Méthode 3 : contrôleur + propriété

Personnellement, je pense que les deux premières méthodes peuvent résoudre le problème, mais la maintenabilité du code n'est pas très bonne. $watch est très difficile à comprendre quand les attributs sont liés les uns aux autres. $emit/$on nécessite d'écrire une logique deux fois (lors de l'initialisation de la directive et lorsque le rappel est exécuté). Dans la méthode 1, j'ai mentionné que parfois les attributs déclaratifs sont plus faciles à comprendre que $watch. Cette méthode consiste à utiliser le contrôleur. La directive peut définir son propre contrôleur comme source de données (ou modèle de vue), et nous pouvons utiliser les propriétés qui doivent être calculées comme propriétés du contrôleur. De cette façon, ils seront automatiquement calculés lors du contrôle technique.

// 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>
}

De cette façon, la plupart de la logique peut être déplacée vers le contrôleur. S'il n'y a pas d'opération DOM, nous n'avons même pas besoin d'écrire la méthode link. Il n'est pas nécessaire d'ajouter $watch et $on supplémentaires. Juste en raison des caractéristiques du dirty-checking, les propriétés liées au modèle sont souvent calculées plusieurs fois plus. Les propriétés doivent donc être très simples. Dans la plupart des cas, cela ne posera pas de problème.

Le contenu ci-dessus est la directive de mise à jour angulaire basée sur le statut du service introduit par l'éditeur. J'espère qu'il sera utile à tout le monde !