首頁 > web前端 > js教程 > 主體

AngularJS中如何使用$parse或$eval在運行時對Scope變數賦值_AngularJS

WBOY
發布: 2016-05-16 15:18:21
原創
1323 人瀏覽過

在"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。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板