Angular mengemas kini directive_AngularJS berdasarkan status perkhidmatan

Angular JS (Angular.JS) ialah satu set rangka kerja, templat, pengikatan data dan komponen UI yang kaya yang digunakan untuk membangunkan halaman web. Ia menyokong keseluruhan proses pembangunan dan menyediakan seni bina aplikasi web tanpa manipulasi DOM manual.

AngularJS direka untuk mengatasi kelemahan HTML dalam membina aplikasi. HTML ialah bahasa perisytiharan yang baik direka untuk paparan teks statik, tetapi ia adalah lemah apabila ia datang untuk membina aplikasi WEB. AngularJS wujud di sini, menggantikan kekurangan semula jadi HTML dan digunakan untuk membina aplikasi web.

TL;DR

Artikel ini menerangkan tiga kaedah mengemas kini arahan berdasarkan status perkhidmatan. Ia ialah ungkapan $watch, penghantaran acara dan sifat pengiraan pengawal.

Soalan

Saya mempunyai Perkhidmatan pembaca yang mengandungi beberapa maklumat status (seperti status sambungan dan bateri). Sekarang saya perlu membuat arahan untuk memaparkan keadaan ini. Kerana ia hanya perlu mendapatkan data daripada readerService dan tidak memerlukan sebarang nilai luaran, saya terus menyuntik perkhidmatan ke dalamnya. Tetapi bagaimana untuk mengemas kini menjadi masalah.

Kod perkhidmatan adalah seperti berikut.

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)

kod arahan adalah seperti berikut:

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

Saya telah mencuba kaedah berikut, yang diperkenalkan satu persatu di bawah.

Kaedah 1: $watch

Kaedah pertama yang terlintas di fikiran ialah menggunakan $watch dalam arahan untuk memantau readerService.status. Oleh kerana ia bukan atribut skop arahan, kita perlu membungkusnya dalam fungsi. Angular akan mengira dan membandingkan nilai lama dan baharu semasa pemeriksaan kotor, dan panggilan balik akan dicetuskan hanya jika keadaan benar-benar berubah.

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

Kaedah ini cukup mudah dan cekap selagi kod yang melibatkan perubahan dalam readerService.status mencetuskan semakan kotor, arahan akan dikemas kini secara automatik. perkhidmatan tidak memerlukan sebarang pengubahsuaian kod.

Tetapi jika terdapat berbilang atribut arahan yang dipengaruhi oleh status perkhidmatan, maka kod $watch akan menjadi lebih kabur. Terutama apabila nilai yang diubah suai oleh $watch akan menjejaskan nilai lain. Contohnya:

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

Pada masa ini, gaya pengaturcaraan deklaratif akan lebih mudah difahami, seperti harta yang dikira dalam Ember atau Vue. Ini akan dibincangkan kemudian.

Kaedah 2: $broadcast/$emit + $on

Ideanya ialah perkhidmatan menghantar acara setiap kali keadaan berubah, dan kemudian arahan mendengar acara untuk menukar keadaan. Kerana status mungkin telah dikemas kini apabila arahan diberikan. Jadi kita perlu mengira nilai awal dalam pautan.

Saya mula-mula melakukannya dengan $broadcast. Kodnya adalah seperti berikut:

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

Tetapi saya serta-merta mendapati bahawa kemas kini UI selepas $broadcast sentiasa mengambil masa lebih daripada 1 saat (tetapi panggilan balik $on sangat pantas). Selepas beberapa penyelidikan Google, kami mendapati bahawa sebabnya ialah $broadcast menyiarkan ke semua skop peringkat rendah, dan kemudian semakan kotor dilakukan selepas siaran selesai. Pendekatan yang lebih baik ialah menggunakan $emit, yang hanya akan meneruskan acara ke atas, tetapi anda mesti menggunakan $rootScope untuk menghantar acara atau mendengar acara.

Kod yang diubah suai adalah seperti berikut:

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

Jika anda terpaksa menggunakan $broadcast atas sebab tertentu, anda boleh menggunakan $digest atau $apply pada penghujung panggilan balik $on untuk memaksa pencetus semakan kotor, yang juga boleh mencapai tujuan mengemas kini UI dengan cepat.

Kaedah 3: pengawal + harta

Saya secara peribadi berpendapat bahawa dua kaedah pertama boleh menyelesaikan masalah, tetapi kebolehselenggaraan kod tidak begitu baik. $watch amat sukar untuk difahami apabila atribut berkaitan antara satu sama lain $emit/$on memerlukan penulisan logik dua kali (semasa memulakan arahan dan apabila panggilan balik dilaksanakan). Dalam Kaedah 1, saya menyebut bahawa kadangkala atribut deklaratif lebih mudah difahami daripada $watch. Kaedah ini adalah menggunakan pengawal. Arahan boleh menetapkan pengawalnya sendiri sebagai sumber data (atau model lihat), dan kita boleh menggunakan sifat yang perlu dikira sebagai sifat pengawal. Dengan cara ini mereka akan dikira secara automatik semasa pemeriksaan kotor.

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

Dengan cara ini, kebanyakan logik boleh dialihkan ke pengawal. Jika tiada operasi DOM, kami tidak perlu menulis kaedah pautan pun. Tidak perlu menambah $watch dan $on tambahan. Hanya kerana ciri-ciri pemeriksaan kotor, sifat yang terikat pada templat sering dikira beberapa kali lebih banyak. Jadi sifatnya mestilah sangat mudah. Dalam kebanyakan kes ini tidak akan menjadi masalah.

Kandungan di atas ialah arahan kemas kini Angular berdasarkan status perkhidmatan yang diperkenalkan oleh editor saya harap ia akan membantu semua orang!