問(wèn)題描述

不確定度指令，傳入?yún)⒘款悇e，然后該指令列出該類別下的所有不確定度。

新增頁(yè)面用到了三個(gè)該指令，只有最后一個(gè)成功，前兩個(gè)都沒(méi)有數(shù)據(jù)。

探究源碼

以下是指令源碼：

'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 = [];
     // 監(jiān)聽(tīng)參量類別
     scope.$watch('parameterCategory', self.watchParameterCategory);
     // 監(jiān)聽(tīng)不確定度
     scope.$watch('ngModel', self.watchNgModel);
    };

    // 監(jiān)聽(tīng)參量類別
    self.watchParameterCategory = function(newValue) {
     if (newValue && newValue.id) {
      // 設(shè)置不確定度列表
      scope.accuracyList = newValue.accuracyUncertaintyList;
      // 過(guò)濾數(shù)據(jù)
      self.filter();
     }
    };

    // 監(jiān)聽(tīng)不確定度
    self.watchNgModel = function(newValue) {
     if (newValue && newValue.id) {
      // 設(shè)置默認(rèn)選中
      scope.selected = newValue;
     }
    };

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

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

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

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

嘗試

嘗試打印了一下scope.accuracyList，果然有問(wèn)題。

前兩個(gè)都是空，最后一個(gè)數(shù)組有值。

想不明白，這里明明監(jiān)聽(tīng)參量類別，并將scope的accuracyList設(shè)置了值??？為什么沒(méi)有呢？

scope

嘗試打印一下scope。

去關(guān)注scope的$id就行了。

依次打印的是：

504
508   // 第一個(gè)指令
506
508   // 第二個(gè)指令
508
508   // 第三個(gè)指令

前兩個(gè)指令執(zhí)行時(shí)賦值的是一個(gè)scope，而過(guò)濾的又是另一個(gè)scope，所以過(guò)濾不出數(shù)據(jù)，最后一個(gè)是同一scope，所以正常輸出。

原因

官方文檔

HTML Compiler - AngularJS

HTML Compiler允許開(kāi)發(fā)者教會(huì)瀏覽器一些新的語(yǔ)法，AngularJS稱這個(gè)為指令。

Compiler是一個(gè)遍歷DOM去搜尋屬性的AngularJS服務(wù)，編譯分為以下兩個(gè)階段。

• Compile：遍歷DOM并收集所有的指令，返回結(jié)果是一個(gè)linking函數(shù)。
• Link：使用scope整合指令并產(chǎn)生動(dòng)態(tài)視圖，任何scope模型上的改變都會(huì)反映到視圖上，任何視圖上的用戶交互也會(huì)反映到scope模型上。

指令如何編譯

AngularJS操作DOM節(jié)點(diǎn)而不是字符串，這很重要。但通常，你不需要關(guān)注這個(gè)，因?yàn)楫?dāng)頁(yè)面加載時(shí)，瀏覽器會(huì)自動(dòng)把HTML轉(zhuǎn)換為DOM。

指令編譯有以下三階段：

• $compile遍歷DOM并匹配指令，如果compiler發(fā)現(xiàn)有匹配指令的元素，就會(huì)將該指令添加到指令列表中。一個(gè)元素可能匹配多個(gè)指令。
• 一旦所有匹配DOM元素的指令都被確定，然后compiler會(huì)根據(jù)優(yōu)先級(jí)對(duì)指令進(jìn)行排序。每一個(gè)指令的compile函數(shù)都會(huì)被執(zhí)行，每一個(gè)compile函數(shù)都有操作DOM的機(jī)會(huì)。compile會(huì)返回link函數(shù)，這些函數(shù)被組合成一個(gè)“組合的”link函數(shù)，它能調(diào)用每個(gè)指令返回的link函數(shù)。
• $compile會(huì)調(diào)用上一步中的“組合的”link函數(shù)來(lái)鏈接scope和模板。

下面是官方的示意代碼：

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

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

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

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

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

分析

compile只在編譯時(shí)執(zhí)行一次，只要頁(yè)面中存在一個(gè)該指令，該指令的link方法就執(zhí)行一次。

所以，AngularJS使用$compile編譯我的指令，然后看我頁(yè)面中用到了三個(gè)該指令，并且都是獨(dú)立scope，所以就創(chuàng)建了三個(gè)scope。

然后使用這三個(gè)scope去調(diào)用link函數(shù)。

前面已經(jīng)提到，AngularJS會(huì)將link函數(shù)統(tǒng)一組合成一個(gè)“組合的”link函數(shù)，所以我們可以猜想，組合函數(shù)中的link函數(shù)的數(shù)量與指令的數(shù)量一致，所以三次調(diào)用的是一個(gè)link函數(shù)，link函數(shù)只有一個(gè)實(shí)例！

linkFn(scope)

將scope傳進(jìn)去作為link函數(shù)的入?yún)ⅰ?/p>

上面的事件監(jiān)聽(tīng)都是沒(méi)毛病的，將傳入的scope綁定到視圖，然后添加到DOM中，然后就與這個(gè)link函數(shù)無(wú)關(guān)了。

但是這個(gè)filter就不行了。

第一個(gè)scope調(diào)用，filter功能是過(guò)濾第一個(gè)scope的accuracyList，第二個(gè)scope調(diào)用，filter功能是過(guò)濾第二個(gè)scope的accuracyList。

所以第三次執(zhí)行時(shí)，第三個(gè)scope將之前的兩個(gè)都覆蓋了，link函數(shù)中的filter的作用變成了過(guò)濾最后一個(gè)scope的accuracyList。

<!-- 不確定度 -->
<ui-select ng-model="selected" theme="bootstrap" ng-change="updateModel(selected)">
 <ui-select-match placeholder="請(qǐng)選擇">
  {{ $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>

所以這里下拉框顯示的是不確定度過(guò)濾后的_value的值，這里的空字符串看起來(lái)不明顯，加上test測(cè)試一下。

所以，這塊視圖綁定的scope是正確的，只是時(shí)間監(jiān)聽(tīng)之后去過(guò)濾數(shù)據(jù)，因?yàn)檫^(guò)濾的并不是當(dāng)前scope的數(shù)據(jù)，所以accuracy._value就沒(méi)有值，是undefined，所以顯示一個(gè)空的字符串。

解決方案

明白了原理之后解決問(wèn)題自然易如反掌，只需將filter與scope獨(dú)立即可，這樣就不受每次執(zhí)行不同scope的影響了。

總結(jié)

很多東西，書(shū)上是沒(méi)有的，需要我們自己去發(fā)現(xiàn)，去分析，去解決。

翻開(kāi)了之前遇到指令編譯問(wèn)題時(shí)從別人博客里學(xué)習(xí)來(lái)的手動(dòng)編譯方法。

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

記得之前的需求是，數(shù)據(jù)經(jīng)過(guò)過(guò)濾器過(guò)濾，返回的是一段HTML代碼，雖然使用ng-bind-html能將該段代碼添加到DOM中，但是這段代碼中有指令，因?yàn)樵撝噶畈皇浅跏紩r(shí)就有的，所以，這個(gè)指令是不會(huì)被編譯的。

所以需要編寫(xiě)一個(gè)重新編譯的指令，手動(dòng)編譯動(dòng)態(tài)創(chuàng)建的指令。

記得當(dāng)時(shí)，看這段代碼也不是那么完全理解，現(xiàn)在學(xué)習(xí)完指令的編譯之后，再去翻看之前的代碼，一切原來(lái)是如此簡(jiǎn)單。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論