說說AngularJS中的$parse和$eval的用法
AngularJS的初學(xué)者常常會對$parse和$eval兩個內(nèi)建服務(wù)感到有些困惑，今天我們就來說說AngularJS中的$parse和$eval。
總的來說，$parse和$eval都是作用于AngularJS的表達(dá)式。
什么是表達(dá)式？
AngularJS中的表達(dá)式就是一些類似于JavaScript代碼的代碼片段（但是它們和JavaScript代碼有不盡相同）。表達(dá)式通常被用來防止在綁定中，例如{{expression}}。下面是一個例子：
1 + 2 = {{ 1 + 2 }}
或者：
My name is {{ user.name }}
$parse服務(wù)
$parse服務(wù)可以講一個表達(dá)式轉(zhuǎn)換為一個函數(shù)。這個函數(shù)可以被調(diào)用，其中的參數(shù)是一個上下文對象，通常來說是作用域。
另外，通過$parse的表達(dá)式返回的這個函數(shù)有一個assign屬性。這個assign屬性也是一個函數(shù)，它可以用來在給定的上下文中改變這個表達(dá)式的值。
下面是一段簡單的代碼：
<div my-attr="obj.name" my-directive>testing</div>
app.directive('myDirective',function($log,$parse){
return function(scope,elem,attrs){
//解析"my-attr屬性值到一個函數(shù)中"
var model = $parse(attrs.myAttr);
//model現(xiàn)在是一個函數(shù)，可以調(diào)用它來獲取表達(dá)式的值
//下面這行代碼將會輸出作用域中obj.name的值
$log.log(model(scope));
elem.bind('click',function(){
//'model.assign'也是一個函數(shù)，它用來更新表達(dá)式的值
model.assign(scope,'New name');
scope.$apply();
})
}
});
上面的例子可以充分體現(xiàn)我們?yōu)槭裁葱枰?parse服務(wù)。如果屬性值是name，那么我們完全可以不用$parse，只用scope[attrs.myAttr]即可。但是在上面的例子中，方括號并不管用。
$eval服務(wù)
$eval是一個作用域scope中的方法，它將會在當(dāng)前作用域中執(zhí)行一個表達(dá)式并返回結(jié)果：
scope.a = 1;
scope.b = 2;
scope.$eval('a+b'); // 3
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近Angular項目組終于發(fā)布了新版——正式版 Angular 4.0.0。所以想著就來嘗試下升級，記錄下整個升級過程分享給大家，所以這篇文章主要介紹了Angular2升級到Angular4的詳細(xì)步驟，需要的朋友可以參考下。2017-03-03
本文通過一個案例給大家介紹angularJs解決跨域問題，非常具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
一直比較喜歡angular，正巧最近有個項目用到了，所以想和大家來分享下，下面這篇文章主要給大家介紹了關(guān)于Angular項目從新建、打包到nginx部署的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
AngularJs bootstrap搭載前臺框架——js控制部分
本文主要介紹AngularJs bootstrap搭載前臺框架js控制部分的資料，這里有實(shí)現(xiàn)代碼，有興趣的小伙伴可以參考下2016-09-09
這篇文章主要記錄了一些在學(xué)習(xí)和使用angular.js踩到的坑和需要注意的點(diǎn)，方便以后自己查閱，也給同樣遇到這些問題的朋友們一些幫助，有需要的朋友們下面來一起看看吧。2016-10-10
這篇文章主要介紹了使用Angular-CLI構(gòu)建NPM包的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本章介紹的是如何對模板驅(qū)動表單創(chuàng)建自定義校驗器，它相比較響應(yīng)式表單自定義校驗器略為復(fù)雜一些。接下來通過本文給大家分享Angular在模板驅(qū)動表單中自定義校驗器的方法，感興趣的朋友一起看看吧2017-08-08
Angular.js?實(shí)現(xiàn)帶手柄自由調(diào)整頁面大小的功能
這篇文章主要介紹了Angular.js?實(shí)現(xiàn)帶手柄自由調(diào)整頁面大小的功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-12-12
跨域傳輸Cookie是需要后臺和前臺同時做相關(guān)處理才能解決的，這篇文章主要介紹了Angularjs之如何在跨域請求中傳輸Cookie的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06