Angular JS (Angular.JS) 是一組用來(lái)開(kāi)發(fā)Web頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。它支持整個(gè)開(kāi)發(fā)進(jìn)程，提供web應(yīng)用的架構(gòu)，無(wú)需進(jìn)行手工DOM操作。
    AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。HTML是一門(mén)很好的為靜態(tài)文本展示設(shè)計(jì)的聲明式語(yǔ)言，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。這里AngularJS就應(yīng)運(yùn)而生，彌補(bǔ)了HTML的天然缺陷，用于構(gòu)件Web應(yīng)用等。
    TL;DR
    這篇文章講解了三種根據(jù) service 的狀態(tài)更新 directive 的做法。分別是 $watch 表達(dá)式，事件傳遞，和 controller 的計(jì)算屬性。
    問(wèn)題
    我有一個(gè) readerService ，其中包含一些狀態(tài)信息（比如連接狀態(tài)和電量）?，F(xiàn)在我需要做一個(gè) directive 去展示這些狀態(tài)。因?yàn)樗恍枰獜?readerService 中獲取數(shù)據(jù)，不需要任何外部傳值，所以我直接把 service 注入進(jìn)去。但如何更新就成了一個(gè)問(wèn)題。
    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>
    {{statusDisplay}}
    </div>
    `,
    link(scope) {
    // Set and change scope.statusDisplay here
    }
    }
    })
    我嘗試過(guò)以下幾種辦法，下面一一介紹。
    方法一：$watch
    第一個(gè)想到的方法就是在 directive 中用 $watch 去監(jiān)視 readerService.status 。因?yàn)樗皇?directive scope 的屬性，所以我們需要用一個(gè)函數(shù)來(lái)包裹它。Angular 會(huì)在 dirty-checking 時(shí)計(jì)算和比較新舊值，只有狀態(tài)真的發(fā)生了改變才會(huì)觸發(fā)回調(diào)。
    // In directive
    link(scope) {
    scope.$watch(() => readerService.status, (status) => {
    scope.statusDisplay = STATUS_DISPLAY[status]
    })
    }
    這個(gè)做法足夠簡(jiǎn)單高效，只要涉及 readerService.status 改變的代碼會(huì)觸發(fā) dirty-checking ，directive 就會(huì)自動(dòng)更新。service 不需要修改任何代碼。
    但如果有多個(gè) directive 的屬性都受 service status 的影響，那 $watch 代碼就看得比較晦澀了。尤其是 $watch 修改的值會(huì)影響其他的值的時(shí)候。比如：
    // 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
    })
    }
    這種時(shí)候聲明式的編程風(fēng)格會(huì)更容易看懂，比如 Ember 或 Vue 里面的 computed property 。這個(gè)待會(huì)討論。
    方法二：$broadcast/$emit + $on
    這種思路是 service 每次狀態(tài)改變都發(fā)送一個(gè)事件，然后 directive 監(jiān)聽(tīng)事件來(lái)改變狀態(tài)。因?yàn)?directive 渲染的時(shí)候也許 status 已經(jīng)更新了。所以我們需要在 link 中計(jì)算一個(gè)初始值。
    我最開(kāi)始是用 $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]
    })
    }
    但馬上發(fā)現(xiàn) $broadcast 之后 UI 更新總要等 1 秒多（不過(guò) $on 回調(diào)倒是很快）。Google 一番后知道原因是 $broadcast 是向下層所有 scope 廣播，廣播完成后再 dirty-checking 。一個(gè)更好的做法是使用 $emit ，它只會(huì)向上傳遞事件，不過(guò)不管發(fā)送事件還是監(jiān)聽(tīng)事件都得用 $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]
    })
    }
    如果因?yàn)槟承┰虿坏貌挥?$broadcast 的話，你可以在 $on 回調(diào)最后用 $digest 或 $apply 強(qiáng)制觸發(fā) dirty-checking ，這也可以達(dá)到快速更新 UI 的目的。
    方法三：controller + property
    我個(gè)人覺(jué)得前兩個(gè)方法能解決問(wèn)題，但代碼維護(hù)性都不太好。 $watch 在屬性相互關(guān)聯(lián)的情況下非常難看懂， $emit/$on 需要把一些邏輯寫(xiě)兩次（初始化 directive 時(shí)和回調(diào)執(zhí)行時(shí)）。方法一中我提到了有些時(shí)候聲明式的屬性比 $watch 更容易看懂。這個(gè)方法就是使用 controller 。directive 可以設(shè)置自己的 controller 作為數(shù)據(jù)來(lái)源（或者說(shuō) view model），我們可以把那些需要計(jì)算的屬性作為 controller 的屬性。這樣 dirty-checking 時(shí)它們就會(huì)自動(dòng)計(jì)算。
    // 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>
    {{vm.statusDisplay}}
    </div>
    }
    這樣一來(lái)，大部分邏輯都可以挪到 controller 中。如果沒(méi)有 DOM 操作我們甚至可以不寫(xiě) link 方法。也沒(méi)必要加入額外的 $watch 和 $on 。只是因?yàn)?dirty-checking 的特性，綁定到 template 的屬性往往會(huì)多計(jì)算幾次。所以屬性必須非常簡(jiǎn)單。大部分情況下這不會(huì)有什么問(wèn)題。
    以上內(nèi)容是小編給大家介紹的Angular 根據(jù) service 的狀態(tài)更新 directive，希望對(duì)大家有所幫助！