說(shuō)說(shuō)AngularJS中的$parse和$eval的用法
AngularJS的初學(xué)者常常會(huì)對(duì)$parse和$eval兩個(gè)內(nèi)建服務(wù)感到有些困惑，今天我們就來(lái)說(shuō)說(shuō)AngularJS中的$parse和$eval。
總的來(lái)說(shuō)，$parse和$eval都是作用于AngularJS的表達(dá)式。
什么是表達(dá)式？
AngularJS中的表達(dá)式就是一些類(lèi)似于JavaScript代碼的代碼片段（但是它們和JavaScript代碼有不盡相同）。表達(dá)式通常被用來(lái)防止在綁定中，例如{{expression}}。下面是一個(gè)例子：
1 + 2 = {{ 1 + 2 }}
或者：
My name is {{ user.name }}
$parse服務(wù)
$parse服務(wù)可以講一個(gè)表達(dá)式轉(zhuǎn)換為一個(gè)函數(shù)。這個(gè)函數(shù)可以被調(diào)用，其中的參數(shù)是一個(gè)上下文對(duì)象，通常來(lái)說(shuō)是作用域。
另外，通過(guò)$parse的表達(dá)式返回的這個(gè)函數(shù)有一個(gè)assign屬性。這個(gè)assign屬性也是一個(gè)函數(shù)，它可以用來(lái)在給定的上下文中改變這個(gè)表達(dá)式的值。
下面是一段簡(jiǎn)單的代碼：
<div my-attr="obj.name" my-directive>testing</div>
app.directive('myDirective',function($log,$parse){
return function(scope,elem,attrs){
//解析"my-attr屬性值到一個(gè)函數(shù)中"
var model = $parse(attrs.myAttr);
//model現(xiàn)在是一個(gè)函數(shù)，可以調(diào)用它來(lái)獲取表達(dá)式的值
//下面這行代碼將會(huì)輸出作用域中obj.name的值
$log.log(model(scope));
elem.bind('click',function(){
//'model.assign'也是一個(gè)函數(shù)，它用來(lái)更新表達(dá)式的值
model.assign(scope,'New name');
scope.$apply();
})
}
});
上面的例子可以充分體現(xiàn)我們?yōu)槭裁葱枰?parse服務(wù)。如果屬性值是name，那么我們完全可以不用$parse，只用scope[attrs.myAttr]即可。但是在上面的例子中，方括號(hào)并不管用。
$eval服務(wù)
$eval是一個(gè)作用域scope中的方法，它將會(huì)在當(dāng)前作用域中執(zhí)行一個(gè)表達(dá)式并返回結(jié)果：
scope.a = 1;
scope.b = 2;
scope.$eval('a+b'); // 3
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular 4依賴注入學(xué)習(xí)教程之InjectToken的使用（八）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之InjectToken使用的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
本篇文章主要介紹了AngularJs常用的過(guò)濾器。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示
最近因?yàn)楣ぷ餍枰隽艘粋€(gè)選擇標(biāo)簽的功能，把一些標(biāo)簽展示給用戶，用戶選擇自己喜歡的標(biāo)簽，就類(lèi)似我們?cè)谫?gòu)物網(wǎng)站看到的那種過(guò)濾標(biāo)簽似的，所以這篇文章就給大家介紹了Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示的方法，下面來(lái)一起看看吧。2016-11-11
AngularJS Toaster是一個(gè) AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.這篇文章主要介紹了AngularJS Toaster使用詳解,需要的朋友可以參考下2017-02-02
angularjs 的數(shù)據(jù)綁定實(shí)現(xiàn)原理
本篇文章主要介紹了angularjs 的數(shù)據(jù)綁定實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Angular.js中angular-ui-router的簡(jiǎn)單實(shí)踐
本篇文章主要介紹了Angular.js中angular-ui-router的簡(jiǎn)單實(shí)踐，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn)
最近在做AngularJS 項(xiàng)目，這是寫(xiě)的一個(gè)60秒倒計(jì)時(shí)功能，下面小編給大家介紹AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn)，需要的朋友參考下吧2017-06-06
解決AngualrJS頁(yè)面刷新導(dǎo)致異常顯示問(wèn)題
本篇文章主要介紹了解決AngualrJS頁(yè)面刷新導(dǎo)致異常顯示問(wèn)題的方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
本文主要介紹AngularJS 事件,這里整理了相關(guān)資料,比較詳細(xì)的介紹了AngularJS的使用方法,有需要的小伙伴參考下2016-07-07
Angular入口組件（entry component）與聲明式組件的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Angular入口組件（entry component）與聲明式組件的區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04