AngularJs $parse、$eval和$observe、$watch詳解_AngularJS

$parse和$eval

$parse和$eval這兩個函數都可以解析運算式的值.

它們的區別在於$parse是一個服務, 可以注入使用. $eval是scope對象上的一個方法, 我們只能在能訪問scope的情境下使用它.

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

$parse服務接收一個運算式作為參數並返回一個函數. 這個函數可以被調用, 其中的參數是一個context對象, 通常來說是範圍.
另外, 這個函數有一個assign屬性. 它也是一個函數, 可以用來在給定的上下文中改變這個運算式的值. 最後一行代碼示範了如何使用locals來覆蓋context對象.

$eval用起來要簡單很多, 因為它的上下文已經被指定為scope對象.

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

關於$parse和$eval之間的關係, 我們能從Angular源碼中看出來, 可以說$eval是為了讓$parse在scope中使用更方便的文法糖.

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

$eval還有個同胞兄弟, $evalAsync, 它並不會立刻計算運算式的值, 而是將運算式緩衝起來, 等到下一次$digest ( 髒檢查 ) 的時候執行. 以擷取更好的效能.

$observe和$watch

$observe和$watch都可以監聽運算式值的變化. 但有顯著的不同.
$observe是angular指令中link函數第三個參數 ( attrs ) 的一個方法. 只能在指令的link函數中使用它. 它是通過$evalAsync函數實現監控的.

$watch是scope對象上的一個方法, watch運算式很靈活, 可以是一個函數, 可以是scope上的屬性, 也可以是一個字串形式的運算式. 監聽scope上的屬性名稱或運算式的時候, 會利用$parse服務將運算式轉換成一個函數, 這個函數會在$digest中被調用. $watch的第三個參數"objectEquality", 指定比較對象的方式, 如果為true,則用angular.equals, 否則直接比較引用. 預設為false.

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

當你需要監聽一個包含"{{}}"的DOM屬性時, 使用$observe, 如果用$watch, 只能得到undefined. 反之, 就用$watch. 如果用$observe, 只能得到一個固定的字串.

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

有一個特殊的情況, 當你的指令使用了獨立的範圍 ( scope:{} ) , 那些應用了"@"文法的DOM屬性, 即使包含"{{ }}", 也可以被$watch.

因為@首碼標識符, 它的實現是通過$observe去監聽DOM屬性的變化, 這就是為什麼@attr的值只能是字串或是"{{}}", 而不能是scope上的屬性, 所以最終$watch看到的運算式是沒有"{{ }}"的. 而"="和"&"則是基於$watch實現. 所以=attr, &attr的值不能包含"{{ }}", 但可以直接使用scope上的屬性.

$watchGroup和$watchCollection

$watchGroup是用來監聽一組運算式. 數組中任意運算式的變化都會觸發監聽函數.

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

$watchCollection用來監聽一個對象(包括數組), 當這個對象的任意屬性發生變化時, 觸發監聽函數. 和$watch一樣,第一次參數可以是一個返回一個對象的函數.

$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都返回一個移除監聽的函數. 當需要取消監聽的時候, 直接調用.

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

以上就是對AngularJs $parse、$eval和$observe、$watch的知識詳解，謝謝大家對本站的支援！