問(wèn)題描述
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、大名網(wǎng)絡(luò)推廣、成都小程序開發(fā)、大名網(wǎng)絡(luò)營(yíng)銷、大名企業(yè)策劃、大名品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供大名建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:muchs.cn
不確定度指令,傳入?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
允許開發(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é)
很多東西,書上是沒(méi)有的,需要我們自己去發(fā)現(xiàn),去分析,去解決。
翻開了之前遇到指令編譯問(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ì)被編譯的。
所以需要編寫一個(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í)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章標(biāo)題:AngularJS多指令Scope問(wèn)題的解決
當(dāng)前鏈接:http://muchs.cn/article8/ipijip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、網(wǎng)站排名、品牌網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣、定制網(wǎng)站、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)