AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對(duì)Scope變量賦值
在"AngularJS中自定義有關(guān)一個(gè)表格的Directive"中自定義了一個(gè)有關(guān)表格的Direcitve,其表格的表現(xiàn)方式是這樣的:
<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>
以上,變量colmnmap的值是事先定義在了Scope中的:
return { restrict: 'E', scope: { columnmap: '=', datasource: '=' }, link:link, template:template };
AngularJS中,還有一種運(yùn)行時(shí)給Scope變量賦值的辦法,那就是在link函數(shù)中使用$parse或$eval方法。
在Direcitve的呈現(xiàn)方面和以前一致:
<table-helper-with-parse datasource="customers" columnmap="[{name: 'Name'},...]"></table-helper-with-parse>
Directive大致是這樣:
var tableHelperWithParse = function($parse){ var template = "", link = function(scope, element, attrs){ var headerCols = [], tableStart = '<table>', tableEnd = '</table>', table = '', visibleProps = [], sortCol = null, sortDir = 1, columnmap = null; $scope.$watchCollection('datasource', render); //運(yùn)行時(shí)賦值columnmap columnmap = scope.$eval(attrs.columnmap); //或者 columnmap = $parse(attrs.columnmap)(); wireEvents(); function rener(){ if(scope.datasource && scope.datasourse.length){ table += tableStart; table += renderHeader(); table += renderRows() + tableEnd; renderTable(); } } }; return { restrict: 'E', scope: { datasource: '=' }, link: link, template: template } } angular.module('direcitvesModule') .directive('tableHelperWithParse', tableHelperWithParse);
下面給大家介紹下$parse和$eval的不同
首先,$parse跟$eval都是用來(lái)解析表達(dá)式的, 但是$parse是作為一個(gè)單獨(dú)的服務(wù)存在的。$eval是作為scope的方法來(lái)使用的。
$parse典型的使用是放在設(shè)置字符串表達(dá)式映射在真實(shí)對(duì)象上的值。也可以從$parse上直接獲取到表達(dá)式對(duì)應(yīng)的值。
var getter = $parse('user.name'); var setter = getter.assign; setter(scope, 'new name'); getter(context, locals) // 傳入作用域,返回值 setter(scope,'new name') // 修改映射在scope上的屬性的值為‘new value'
$eval 即scope.$eval,是執(zhí)行當(dāng)前作用域下的表達(dá)式,如:scope.$eval('a+b'); 而這個(gè)里的a,b是來(lái)自 scope = {a: 2, b:3};
看看源碼它的實(shí)現(xiàn)是
$eval: function(expr, locals) { return $parse(expr)(this, locals); },
可以找到它也是基于$parse,不過(guò)它的參數(shù)已經(jīng)被固定為this,就是當(dāng)前的scope,所以$eval只是在$parse基礎(chǔ)上的封裝而已,是一種$parse快捷的API。
相關(guān)文章
用AngularJS來(lái)實(shí)現(xiàn)監(jiān)察表單按鈕的禁用效果
本篇文章主要介紹了用AngularJS來(lái)實(shí)現(xiàn)監(jiān)察表單按鈕的禁用效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-11-11用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼
本篇文章主要介紹了用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05Angular獲取手機(jī)驗(yàn)證碼實(shí)現(xiàn)移動(dòng)端登錄注冊(cè)功能
最近在使用angular來(lái)做項(xiàng)目,功能要求實(shí)現(xiàn)一是點(diǎn)擊按鈕獲取驗(yàn)證碼,二是點(diǎn)擊登錄驗(yàn)證表單。之前用jquery來(lái)做項(xiàng)目很好做,使用angular怎么實(shí)現(xiàn)呢?其實(shí)實(shí)現(xiàn)代碼也很簡(jiǎn)單的,下面通過(guò)實(shí)例代碼給大家介紹下,需要的朋友參考下吧2017-05-05angular.js4使用 RxJS 處理多個(gè) Http 請(qǐng)求
本篇文章主要介紹了angular.js使用 RxJS 處理多個(gè) Http 請(qǐng)求,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09詳解在Angular4中使用ng2-baidu-map的方法
這篇文章主要介紹了在Angular4中使用ng2-baidu-map的方法,本文分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06Angular中實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)視圖實(shí)例代碼
近兩年當(dāng)中使用Angular開(kāi)發(fā)過(guò)很多項(xiàng)目,其中也涉及到一些樹(shù)形結(jié)構(gòu)視圖的顯示,最近的在項(xiàng)目中封裝了大量的組件,一些組件也有樹(shù)形結(jié)構(gòu)的展示,所以寫(xiě)出來(lái)總結(jié)一下。2017-05-05詳解Angular路由 ng-route和ui-router的區(qū)別
這篇文章主要介紹了詳解Angular路由 ng-route和ui-router的區(qū)別,分別介紹了兩種路由的用法和區(qū)別,有興趣的可以了解一下2017-05-05AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能,涉及AngularJS使用ng-blur、ng-focus針對(duì)表單事件監(jiān)聽(tīng)相關(guān)操作技巧,需要的朋友可以參考下2017-10-10