1. 程式人生 > >淺談AngularJS中的$parse和$eval

淺談AngularJS中的$parse和$eval

淺談 return 什麽是 apply() logs ava new 表達式 ret

AngularJS的初學者常常會對$parse和$eval兩個內建服務感到有些困惑,今天我們就來說說AngularJS中的$parse和$eval。

總的來說,$parse和$eval都是作用於AngularJS的表達式。

什麽是表達式?
AngularJS中的表達式就是一些類似於JavaScript代碼的代碼片段(但是它們和JavaScript代碼有不盡相同)。表達式通常被用來防止在綁定中,例如{{expression}}。下面是一個例子:

1 + 2 = {{ 1 + 2 }}
或者:

My name is {{ user.name }}
$parse服務
$parse服務可以講一個表達式轉換為一個函數。這個函數可以被調用,其中的參數是一個上下文對象,通常來說是作用域。

另外,通過$parse的表達式返回的這個函數有一個assign屬性。這個assign屬性也是一個函數,它可以用來在給定的上下文中改變這個表達式的值。

下面是一段簡單的代碼:

<div my-attr="obj.name" my-directive>testing</div>

app.directive(‘myDirective‘,function($log,$parse){
    return function(scope,elem,attrs){
        //解析"my-attr屬性值到一個函數中"
        var model = $parse(attrs.myAttr);
        
//model現在是一個函數,可以調用它來獲取表達式的值 //下面這行代碼將會輸出作用域中obj.name的值 $log.log(model(scope)); elem.bind(‘click‘,function(){ //‘model.assign‘也是一個函數,它用來更新表達式的值 model.assign(scope,‘New name‘); scope.$apply(); }) } });

上面的例子可以充分體現我們為什麽需要$parse服務。如果屬性值是name,那麽我們完全可以不用$parse,只用scope[attrs.myAttr]即可。但是在上面的例子中,方括號並不管用。

$eval服務
$eval是一個作用域scope中的方法,它將會在當前作用域中執行一個表達式並返回結果:

scope.a = 1;
scope.b = 2;

scope.$eval(‘a+b‘); // 3

淺談AngularJS中的$parse和$eval