Directive的$eval, $parse,$observe

1 篇文章 / 0 new

發表回應前，請先登入

週三, 2014-02-26 14:58

author

$eval(attr.NAME) : 取回的值包含該值的原本型態.
$parse(attr.NAME) : 回傳一個物件, 透過該物件則可以變更屬性值
$observe(attr.NAME) : 若屬性質包含運算式, 則須透過使方法取得的值
Directive建立約略格式如下：

angular.directive('foo', function() {
  var linker = function(scope, element, attrs) { ...  };
  return {
    restrict: 'EA',
    link: linker
  };<span style="font-size:medium">
});</span>

在 directive linker function 內取出 foo 的屬性值，會有幾種狀況：
1. foo 屬性值是固定的字串值，例如想要傳 class name，id 等。

<div foo="fadeOut"></div>
因為這種狀況是直接給定固定字串值，可以直接在 foo directive 中的 link function 直接取出屬性值，attrs.foo。

2. foo 屬性值是非字串的值，例如：boolean, number 等。

<div foo="true"></div>, <div foo="123"></div>
如果透過 attrs.foo 直接取值的話會是字串型態，但是我想要取值後就是正確的 type 的話，可以使用 scope.$eval(attrs.foo)。

3. foo 屬性質是一個 scope property。

angular.controller('BarCtrl', function($scope) {
$scope.bar = { test:'' };
});
<div ng-controller="BarCtrl">
<div foo="bar.test"></div>
</div>

如果想要在 foo directive 中去更動 bar.test 的值的話，可以使用 $parse 來取值，$parse(attrs.foo)，$parse 會 return 一個 function，之後你可以透過這個 function 的 assign property 去設定 bar.test 的值：
var model = $parse(attrs.foo);
model.assign(scope, 'Hello world'); // scope 為 link function 的 scope

4. foo 屬性值是 interpolated attribute。

<div foo="{{1+1}}"></div>, <div foo="{{bar}}"></div>
如果直接在 link function 直接使用 attrs.foo 取值的話，會是 undefined，因為此時 interpolated attribute 尚未被 evaluated，所以我們可以透過 $observe 來取值，attrs.$observe

from http://zack9433.pixnet.net/blog/post/164296263-%5Bangularjs%5D-%E5%8D%80...

關鍵字:

Directive