$parse和$eval

$parse和$eval這兩個(gè)函數(shù)都可以解析表達(dá)式的值.

它們的區(qū)別在于$parse是一個(gè)服務(wù), 可以注入使用. $eval是scope對(duì)象上的一個(gè)方法, 我們只能在能訪問(wèn)scope的場(chǎng)景下使用它.

var getter = $parse('user.name');
var setter = getter.assign;
var context = {user: {name: 'John Doe'};
var locals = {user: {name: 'Doe John'};

getter(context); //John Doe
setter(context, 'new name');
getter(context); //new name
getter(context, locals); //Doe John

$parse服務(wù)接收一個(gè)表達(dá)式作為參數(shù)并返回一個(gè)函數(shù). 這個(gè)函數(shù)可以被調(diào)用, 其中的參數(shù)是一個(gè)context對(duì)象, 通常來(lái)說(shuō)是作用域.
另外, 這個(gè)函數(shù)有一個(gè)assign屬性. 它也是一個(gè)函數(shù), 可以用來(lái)在給定的上下文中改變這個(gè)表達(dá)式的值. 最后一行代碼演示了如何使用locals來(lái)覆蓋context對(duì)象.

$eval用起來(lái)要簡(jiǎn)單很多, 因?yàn)樗纳舷挛囊呀?jīng)被指定為scope對(duì)象.

var scope = $rootscope.$new(true);
scope.a = 1;
scope.b = 2;
scope.$eval('a + b')//3
scope.$eval(function(scope){
 return scope.a + scope.b;
});//3

關(guān)于$parse和$eval之間的關(guān)系, 我們能從Angular源碼中看出來(lái), 可以說(shuō)$eval是為了讓$parse在scope中使用更方便的語(yǔ)法糖.

$eval: function(expr, locals){
 return $parse(expr)(this, locals);
}

$eval還有個(gè)同胞兄弟, $evalAsync, 它并不會(huì)立刻計(jì)算表達(dá)式的值, 而是將表達(dá)式緩存起來(lái), 等到下一次$digest ( 臟檢查 ) 的時(shí)候執(zhí)行. 以獲取更好的性能.

$observe和$watch

$observe和$watch都可以監(jiān)聽(tīng)表達(dá)式值的變化. 但有顯著的不同.
$observe是angular指令中l(wèi)ink函數(shù)第三個(gè)參數(shù) ( attrs ) 的一個(gè)方法. 只能在指令的link函數(shù)中使用它. 它是通過(guò)$evalAsync函數(shù)實(shí)現(xiàn)監(jiān)控的.

$watch是scope對(duì)象上的一個(gè)方法, watch表達(dá)式很靈活, 可以是一個(gè)函數(shù), 可以是scope上的屬性, 也可以是一個(gè)字符串形式的表達(dá)式. 監(jiān)聽(tīng)scope上的屬性名或表達(dá)式的時(shí)候, 會(huì)利用$parse服務(wù)將表達(dá)式轉(zhuǎn)換成一個(gè)函數(shù), 這個(gè)函數(shù)會(huì)在$digest中被調(diào)用. $watch的第三個(gè)參數(shù)"objectEquality", 指定比較對(duì)象的方式, 如果為true,則用angular.equals, 否則直接比較引用. 默認(rèn)為false.

//html
<div book="{{book.name}}"></div>
//js
attrs.$observe('book', function(newValue){
 //just have one parameter, can't get old value
});
scope.$watch(attrs.book, function(newValue, oldValue){
 //get undefined
});

當(dāng)你需要監(jiān)聽(tīng)一個(gè)包含"{{}}"的DOM屬性時(shí), 使用$observe, 如果用$watch, 只能得到undefined. 反之, 就用$watch. 如果用$observe, 只能得到一個(gè)固定的字符串.

//html
<div book="book.name"></div>
//js
attrs.$observe('book', function(newValue){
 //always get 'book.name'
});
scope.$watch(attrs.book, function(newValue, oldValue){
});

有一個(gè)特殊的情況, 當(dāng)你的指令使用了獨(dú)立的作用域 ( scope:{} ) , 那些應(yīng)用了"@"語(yǔ)法的DOM屬性, 即使包含"{{ }}", 也可以被$watch.

因?yàn)锧前綴標(biāo)識(shí)符, 它的實(shí)現(xiàn)是通過(guò)$observe去監(jiān)聽(tīng)DOM屬性的變化, 這就是為什么@attr的值只能是字符串或是"{{}}", 而不能是scope上的屬性, 所以最終$watch看到的表達(dá)式是沒(méi)有"{{ }}"的. 而"="和"&"則是基于$watch實(shí)現(xiàn). 所以=attr, &attr的值不能包含"{{ }}", 但可以直接使用scope上的屬性.

$watchGroup和$watchCollection

$watchGroup是用來(lái)監(jiān)聽(tīng)一組表達(dá)式. 數(shù)組中任意表達(dá)式的變化都會(huì)觸發(fā)監(jiān)聽(tīng)函數(shù).

$scope.teamScore = 0;
$scope.time = 0;
$scope.$watchGroup(['teamScore', 'time'], function(newVal, oldVal) {
 //newVal and oldVal are both array
});

$watchCollection用來(lái)監(jiān)聽(tīng)一個(gè)對(duì)象(包括數(shù)組), 當(dāng)這個(gè)對(duì)象的任意屬性發(fā)生變化時(shí), 觸發(fā)監(jiān)聽(tīng)函數(shù). 和$watch一樣,第一次參數(shù)可以是一個(gè)返回一個(gè)對(duì)象的函數(shù).

$scope.names = ['igor', 'matias', 'misko', 'james'];
$scope.dataCount = 4;

$scope.$watchCollection('names', function (newVal, oldVal) {
 $scope.dataCount = newVal.length;
});

$timeout(function(){
  $scope.names.pop();
},2000);

$observe, $watch, $watchGroup, $watchCollection都返回一個(gè)移除監(jiān)聽(tīng)的函數(shù). 當(dāng)需要取消監(jiān)聽(tīng)的時(shí)候, 直接調(diào)用.

var off = scope.$watch('name', function(newValue, oldValue){
});
off();

以上就是對(duì)AngularJs $parse、$eval和$observe、$watch的知識(shí)詳解，謝謝大家對(duì)本站的支持！

最新評(píng)論