Angular 根據 service 的狀態更新 directive_AngularJS

Angular JS (Angular.JS) 是一組用來開發Web頁面的框架、模板以及資料綁定和豐富UI元件。它支援整個開發進程，提供web應用的架構，無需進行手動DOM操作。

AngularJS是為了克服HTML在建造應用上的不足而設計的。 HTML是一門很好的為靜態文字展示設計的聲明式語言，但要建立WEB應用的話它就顯得乏力了。這裡AngularJS就應運而生，彌補了HTML的天然缺陷，用於構件Web應用等。

TL;DR

這篇文章說明了三種根據 service 的狀態更新 directive 的做法。分別是 $watch 表達式，事件傳遞，和 controller 的計算屬性。

問題

我有一個 readerService ，其中包含一些狀態資訊（例如連接狀態和電量）。現在我需要做一個 directive 去展示這些狀態。因為它只需要從 readerService 中取得數據，不需要任何外部傳值，所以我直接把 service 注入進去。但如何更新就成了一個問題。

service 的程式碼如下。

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)

directive 程式碼如下：

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

我嘗試過以下幾種辦法，下面一一介紹。

方法一：$watch

第一個想到的方法就是在 directive 中用 $watch 去監視 readerService.status 。因為它不是 directive scope 的屬性，所以我們需要用一個函數來包裹它。 Angular 會在 dirty-checking 時計算並比較新舊值，只有狀態真的改變了才會觸發回呼。

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

這個做法夠簡單高效，只要涉及 readerService.status 改變的程式碼會觸發 dirty-checking ，directive 就會自動更新。 service 不需要修改任何程式碼。

但如果有多個 directive 的屬性都受 service status 的影響，那麼 $watch 程式碼就看得比較晦澀了。尤其是 $watch 修改的值會影響其他的值的時候。如：

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

這種時候聲明式的程式風格會比較容易看懂，像是 Ember 或 Vue 裡面的 computed property 。這個待會討論。

方法二：$broadcast/$emit + $on

這個想法是 service 每次狀態改變都會傳送一個事件，然後 directive 監聽事件來改變狀態。因為 directive 渲染的時候也許 status 已經更新了。所以我們需要在 link 中計算一個初始值。

我最開始是用 $broadcast 去做的。程式碼如下：

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

但馬上發現 $broadcast 之後 UI 更新總要等 1 秒多（不過 $on 回檔倒是很快）。 Google 一番後知道原因是 $broadcast 是向下層所有 scope 廣播，廣播完成後再 dirty-checking 。一個更好的做法是使用 $emit ，它只會向上傳遞事件，不過不管發送事件還是監聽事件都得用 $rootScope 。

修改後的程式碼如下：

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

如果因為某些原因不得不用 $broadcast 的話，你可以在 $on 回調最後用 $digest 或 $apply 強制觸發 dirty-checking ，這也可以達到快速更新 UI 的目的。

方法三：controller + property

我個人覺得前兩個方法能解決問題，但程式碼維護性都不太好。 $watch 在屬性相互關聯的情況下非常難看懂， $emit/$on 需要把一些邏輯寫兩次（初始化 directive 時和回調執行時）。方法一中我提到了有些時候聲明式的屬性比 $watch 更容易看懂。這個方法就是要使用 controller 。 directive 可以設定自己的 controller 作為資料來源（或者說 view model），我們可以把那些需要計算的屬性當作 controller 的屬性。這樣 dirty-checking 時它們就會自動計算。

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

這樣一來，大部分邏輯都可以移到 controller 中。如果沒有 DOM 操作我們甚至可以不寫 link 方法。也沒必要​​再加入額外的 $watch 和 $on 。只是因為 dirty-checking 的特性，綁定到 template 的屬性往往會多計算幾次。所以屬性必須非常簡單。大部分情況下這不會有什麼問題。

以上內容是小編給大家介紹的Angular 根據 service 的狀態更新 directive，希望對大家有幫助！