點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

AngularJS 多指令Scope問題的解決

來源：懂視網責編：小采時間：2020-11-27 22:05:48

AngularJS 多指令Scope問題的解決

AngularJS 多指令Scope問題的解決:問題描述不確定度指令，傳入參量類別，然后該指令列出該類別下的所有不確定度。新增頁面用到了三個該指令，只有最后一個成功，前兩個都沒有數據。探究源碼以下是指令源碼： 'use strict'; /** * @ngdoc directive * @name webapp

推薦度：

點擊下載本文 文檔為doc格式

導讀AngularJS 多指令Scope問題的解決:問題描述不確定度指令，傳入參量類別，然后該指令列出該類別下的所有不確定度。新增頁面用到了三個該指令，只有最后一個成功，前兩個都沒有數據。探究源碼以下是指令源碼： 'use strict'; /** * @ngdoc directive * @name webapp

問題描述

不確定度指令，傳入參量類別，然后該指令列出該類別下的所有不確定度。

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

探究源碼

以下是指令源碼：

'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服務，編譯分為以下兩個階段。

Compile：遍歷DOM并收集所有的指令，返回結果是一個linking函數。

Link：使用scope整合指令并產生動態視圖，任何scope模型上的改變都會反映到視圖上，任何視圖上的用戶交互也會反映到scope模型上。

指令如何編譯

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

指令編譯有以下三階段：

$compile遍歷DOM并匹配指令，如果compiler發現有匹配指令的元素，就會將該指令添加到指令列表中。一個元素可能匹配多個指令。

一旦所有匹配DOM元素的指令都被確定，然后compiler會根據優先級對指令進行排序。每一個指令的compile函數都會被執行，每一個compile函數都有操作DOM的機會。compile會返回link函數，這些函數被組合成一個“組合的”link函數，它能調用每個指令返回的link函數。

$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中，但是這段代碼中有指令，因為該指令不是初始時就有的，所以，這個指令是不會被編譯的。

所以需要編寫一個重新編譯的指令，手動編譯動態創建的指令。

記得當時，看這段代碼也不是那么完全理解，現在學習完指令的編譯之后，再去翻看之前的代碼，一切原來是如此簡單。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com