說(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)文章
Angular2平滑升級(jí)到Angular4的步驟詳解
最近Angular項(xiàng)目組終于發(fā)布了新版——正式版 Angular 4.0.0。所以想著就來(lái)嘗試下升級(jí)，記錄下整個(gè)升級(jí)過(guò)程分享給大家，所以這篇文章主要介紹了Angular2升級(jí)到Angular4的詳細(xì)步驟，需要的朋友可以參考下。2017-03-03
AngularJs解決跨域問(wèn)題案例詳解(簡(jiǎn)單方法)
本文通過(guò)一個(gè)案例給大家介紹angularJs解決跨域問(wèn)題，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Angular項(xiàng)目從新建、打包到nginx部署全過(guò)程記錄
一直比較喜歡angular，正巧最近有個(gè)項(xiàng)目用到了，所以想和大家來(lái)分享下，下面這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目從新建、打包到nginx部署的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
AngularJs bootstrap搭載前臺(tái)框架——js控制部分
本文主要介紹AngularJs bootstrap搭載前臺(tái)框架js控制部分的資料，這里有實(shí)現(xiàn)代碼，有興趣的小伙伴可以參考下2016-09-09
使用Angular.js開(kāi)發(fā)的注意事項(xiàng)
這篇文章主要記錄了一些在學(xué)習(xí)和使用angular.js踩到的坑和需要注意的點(diǎn)，方便以后自己查閱，也給同樣遇到這些問(wèn)題的朋友們一些幫助，有需要的朋友們下面來(lái)一起看看吧。2016-10-10
這篇文章主要介紹了使用Angular-CLI構(gòu)建NPM包的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Angular在模板驅(qū)動(dòng)表單中自定義校驗(yàn)器的方法
本章介紹的是如何對(duì)模板驅(qū)動(dòng)表單創(chuàng)建自定義校驗(yàn)器，它相比較響應(yīng)式表單自定義校驗(yàn)器略為復(fù)雜一些。接下來(lái)通過(guò)本文給大家分享Angular在模板驅(qū)動(dòng)表單中自定義校驗(yàn)器的方法，感興趣的朋友一起看看吧2017-08-08
Angular.js?實(shí)現(xiàn)帶手柄自由調(diào)整頁(yè)面大小的功能
這篇文章主要介紹了Angular.js?實(shí)現(xiàn)帶手柄自由調(diào)整頁(yè)面大小的功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-12-12
Angularjs之如何在跨域請(qǐng)求中傳輸Cookie的方法
跨域傳輸Cookie是需要后臺(tái)和前臺(tái)同時(shí)做相關(guān)處理才能解決的，這篇文章主要介紹了Angularjs之如何在跨域請(qǐng)求中傳輸Cookie的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06