在"AngularJS中自訂有關一個表格的Directive"中自訂了一個有關表格的Direcitve,其表格的表現方式是這樣的:
<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>
以上,變數colmnmap的值是事先定義在了Scope中的:
return { restrict: 'E', scope: { columnmap: '=', datasource: '=' }, link:link, template:template };
AngularJS中,還有一種運行時給Scope變數賦值的辦法,那就是在link函數中使用$parse或$eval方法。
在Direcitve的呈現方面和以前一致:
<table-helper-with-parse datasource="customers" columnmap="[{name: 'Name'},...]"></table-helper-with-parse>
Directive大致上是這樣:
var tableHelperWithParse = function($parse){ var template = "", link = function(scope, element, attrs){ var headerCols = [], tableStart = '<table>', tableEnd = '</table>', table = '', visibleProps = [], sortCol = null, sortDir = 1, columnmap = null; $scope.$watchCollection('datasource', render); //运行时赋值columnmap columnmap = scope.$eval(attrs.columnmap); //或者 columnmap = $parse(attrs.columnmap)(); wireEvents(); function rener(){ if(scope.datasource && scope.datasourse.length){ table += tableStart; table += renderHeader(); table += renderRows() + tableEnd; renderTable(); } } }; return { restrict: 'E', scope: { datasource: '=' }, link: link, template: template } } angular.module('direcitvesModule') .directive('tableHelperWithParse', tableHelperWithParse);
下面要跟大家介紹下$parse和$eval的不同
首先,$parse跟$eval都是用來解析表達式的, 但是$parse是作為一個單獨的服務存在的。 $eval是作為scope的方法來使用的。
$parse典型的使用是放在設定字串表達式映射在真實物件上的值。也可以從$parse直接取得到表達式對應的值。
var getter = $parse('user.name'); var setter = getter.assign; setter(scope, 'new name'); getter(context, locals) // 传入作用域,返回值 setter(scope,'new name') // 修改映射在scope上的属性的值为‘new value'
$eval 即scope.$eval,是執行目前作用域下的表達式,如:scope.$eval('a+b'); 而這個裡的a,b是來自scope = {a: 2 , b:3};
看看源碼它的實作是
$eval: function(expr, locals) { return $parse(expr)(this, locals); },
可以找到它也是基於$parse,不過它的參數已經被固定為this,就是當前的scope,所以$eval只是在$parse基礎上的封裝而已,是一種$parse快捷的API。