腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

AngularJS 多指令Scope問題的解決

更新時間：2018年10月25日 09:11:49 作者：張喜碩

本文介紹了AngularJS 多指令Scope問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

問題描述

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

新增頁面用到了三個該指令，只有最后一個成功，前兩個都沒有數(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)聽參量類別
     scope.$watch('parameterCategory', self.watchParameterCategory);
     // 監(jiān)聽不確定度
     scope.$watch('ngModel', self.watchNgModel);
    };

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

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

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

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

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

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

嘗試

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

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

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

scope

嘗試打印一下scope。

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

依次打印的是：

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

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

原因

官方文檔

HTML Compiler - AngularJS

HTML Compiler允許開發(fā)者教會瀏覽器一些新的語法，AngularJS稱這個為指令。

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

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

指令如何編譯

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

指令編譯有以下三階段：

$compile遍歷DOM并匹配指令，如果compiler發(fā)現(xiàn)有匹配指令的元素，就會將該指令添加到指令列表中。一個元素可能匹配多個指令。
一旦所有匹配DOM元素的指令都被確定，然后compiler會根據(jù)優(yōu)先級對指令進行排序。每一個指令的compile函數(shù)都會被執(zhí)行，每一個compile函數(shù)都有操作DOM的機會。compile會返回link函數(shù)，這些函數(shù)被組合成一個“組合的”link函數(shù)，它能調(diào)用每個指令返回的link函數(shù)。
$compile會調(diào)用上一步中的“組合的”link函數(shù)來鏈接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只在編譯時執(zhí)行一次，只要頁面中存在一個該指令，該指令的link方法就執(zhí)行一次。

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

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

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

linkFn(scope)

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

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

但是這個filter就不行了。

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

所以第三次執(zhí)行時，第三個scope將之前的兩個都覆蓋了，link函數(shù)中的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是正確的，只是時間監(jiān)聽之后去過濾數(shù)據(jù)，因為過濾的并不是當(dāng)前scope的數(shù)據(jù)，所以accuracy._value就沒有值，是undefined，所以顯示一個空的字符串。

解決方案

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

總結(jié)

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

翻開了之前遇到指令編譯問題時從別人博客里學(xué)習(xí)來的手動編譯方法。

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

記得之前的需求是，數(shù)據(jù)經(jīng)過過濾器過濾，返回的是一段HTML代碼，雖然使用ng-bind-html能將該段代碼添加到DOM中，但是這段代碼中有指令，因為該指令不是初始時就有的，所以，這個指令是不會被編譯的。

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

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

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

您可能感興趣的文章: