AngularJS 多指令 Scope 問題

問題描述

不肯定度指令，傳入參量類別，而後該指令列出該類別下的全部不肯定度。

新增頁面用到了三個該指令，只有最後一個成功，前兩個都沒有數據。

探究

源碼

如下是指令源碼：

'use strict';

/**
 * @ngdoc directive
 * @name webappApp.directive:yunzhiAccuracyUncertainty
 * @description
 * # yunzhiAccuracyUncertainty
 * 不肯定度指令
 * zhangxishuo
 */
angular.module('webappApp')
    .directive('yunzhiAccuracyUncertainty', function($filter) {
        return {
            templateUrl: 'views/directive/yunzhiAccuracyUncertainty.html',
            restrict: 'E',
            scope: {
                parameterCategory: '=',         // 參量類別
                ngModel: '='                    // 不肯定度
            },
            link: function postLink(scope, element, attrs) {
                var self = this;

                // 初始化
                self.init = function() {
                    // 初始化不肯定度空列表
                    scope.accuracyList = [];
                    // 監聽參量類別
                    scope.$watch('parameterCategory', self.watchParameterCategory);
                    // 監聽不肯定度
                    scope.$watch('ngModel', self.watchNgModel);
                };

                // 監聽參量類別
                self.watchParameterCategory = function(newValue) {
                    if (newValue && newValue.id) {
                        // 設置不肯定度列表
                        scope.accuracyList = newValue.accuracyUncertaintyList;
                        // 過濾數據
                        self.filter();
                    }
                };

                // 監聽不肯定度
                self.watchNgModel = function(newValue) {
                    if (newValue && newValue.id) {
                        // 設置默認選中
                        scope.selected = newValue;
                    }
                };

                // 過濾數據
                self.filter = function() {
                    angular.forEach(scope.accuracyList, function(accuracy) {
                        // 過濾不肯定度
                        accuracy._value = $filter('yunzhiAccuracyWithUnit')(accuracy);
                    });
                };

                // 更新模型
                self.updateModel = function(selected) {
                    // 更新數據
                    scope.ngModel = selected;
                };

                // 傳給視圖
                scope.updateModel = self.updateModel;

                self.init();
            }
        };
    });

嘗試

嘗試打印了一下scope.accuracyList，果真有問題。

前兩個都是空，最後一個數組有值。

想不明白，這裏明明監聽參量類別，並將scope的accuracyList設置了值啊？爲何沒有呢？

scope

嘗試打印一下scope。

去關注scope的$id就好了。

依次打印的是：

504
508         // 第一個指令
506
508         // 第二個指令
508
508         // 第三個指令

前兩個指令執行時賦值的是一個scope，而過濾的又是另外一個scope，因此過濾不出數據，最後一個是同一scope，因此正常輸出。

緣由

官方文檔

HTML Compiler - AngularJS

HTML Compiler容許開發者教會瀏覽器一些新的語法，AngularJS稱這個爲指令。

Compiler是一個遍歷DOM去搜尋屬性的AngularJS服務，編譯分爲如下兩個階段。

1. Compile：遍歷DOM並收集全部的指令，返回結果是一個linking函數。
2. Link：使用scope整合指令併產生動態視圖，任何scope模型上的改變都會反映到視圖上，任何視圖上的用戶交互也會反映到scope模型上。

指令如何編譯

AngularJS操做DOM節點而不是字符串，這很重要。但一般，你不須要關注這個，由於當頁面加載時，瀏覽器會自動把HTML轉換爲DOM。

指令編譯有如下三階段：

1. $compile遍歷DOM並匹配指令，若是compiler發現有匹配指令的元素，就會將該指令添加到指令列表中。一個元素可能匹配多個指令。
2. 一旦全部匹配DOM元素的指令都被肯定，而後compiler會根據優先級對指令進行排序。每個指令的compile函數都會被執行，每個compile函數都有操做DOM的機會。compile會返回link函數，這些函數被組合成一個「組合的」link函數，它能調用每一個指令返回的link函數。
3. $compile會調用上一步中的「組合的」link函數來連接scope和模板。

下面是官方的示意代碼：

// HTML字符串
var html = '<div ng-bind="exp"></div>';

// 將HTML字符串轉換爲DOM模板
var template = angular.element(html);

// 編譯DOM模板返回link函數
var linkFn = $compile(template);

// 將編譯後的模板與scope連接
var element = linkFn(scope);

// 添加到DOM中
parent.appendChild(element);

分析

compile只在編譯時執行一次，只要頁面中存在一個該指令，該指令的link方法就執行一次。

因此，AngularJS使用$compile編譯個人指令，而後看我頁面中用到了三個該指令，而且都是獨立scope，因此就建立了三個scope。

而後使用這三個scope去調用link函數。

前面已經提到，AngularJS會將link函數統一組合成一個「組合的」link函數，因此咱們能夠猜測，組合函數中的link函數的數量與指令的數量一致，因此三次調用的是一個link函數，link函數只有一個實例！

linkFn(scope)

將scope傳進去做爲link函數的入參。

上面的事件監聽都是沒毛病的，將傳入的scope綁定到視圖，而後添加到DOM中，而後就與這個link函數無關了。

可是這個filter就不行了。

第一個scope調用，filter功能是過濾第一個scope的accuracyList，第二個scope調用，filter功能是過濾第二個scope的accuracyList。

因此第三次執行時，第三個scope將以前的兩個都覆蓋了，link函數中的filter的做用變成了過濾最後一個scope的accuracyList。

<!-- 不肯定度 -->
<ui-select ng-model="selected" theme="bootstrap" ng-change="updateModel(selected)">
    <ui-select-match placeholder="請選擇">
        {{ $select.selected._value }}
    </ui-select-match>
    <ui-select-choices repeat="accuracy in accuracyList">
        <div ng-bind-html="accuracy._value"></div>
    </ui-select-choices>
</ui-select>

因此這裏下拉框顯示的是不肯定度過濾後的_value的值，這裏的空字符串看起來不明顯，加上test測試一下。

因此，這塊視圖綁定的scope是正確的，只是時間監聽以後去過濾數據，由於過濾的並非當前scope的數據，因此accuracy._value就沒有值，是undefined，因此顯示一個空的字符串。

解決方案

明白了原理以後解決問題天然易如反掌，只需將filter與scope獨當即可，這樣就不受每次執行不一樣scope的影響了。

總結

不少東西，書上是沒有的，須要咱們本身去發現，去分析，去解決。

翻開了以前遇到指令編譯問題時從別人博客裏學習來的手動編譯方法。

angular.module('webappApp')
    .directive('reCompile', function($compile) {
        return {
            restrict: 'A',
            link: function postLink(scope, element, attrs) {
                // 監聽使用該指令的元素上的ngBindHtml
                attrs.$observe('ngBindHtml', function() {
                    // 若是元素使用了ngBindHtml指令
                    if (attrs.ngBindHtml) {
                        // 從新編譯
                        $compile(element[0].children)(scope);
                    }
                });
            }
        };
    });

記得以前的需求是，數據通過過濾器過濾，返回的是一段HTML代碼，雖然使用ng-bind-html能將該段代碼添加到DOM中，可是這段代碼中有指令，由於該指令不是初始時就有的，因此，這個指令是不會被編譯的。

因此須要編寫一個從新編譯的指令，手動編譯動態建立的指令。

記得當時，看這段代碼也不是那麼徹底理解，如今學習完指令的編譯以後，再去翻看以前的代碼，一切原來是如此簡單。

思想與能力，是須要時間沉澱的。