ホームページ > 記事 > ウェブフロントエンド > $parse または $eval を使用して、AngularJS_AngularJS の実行時にスコープ変数に値を割り当てる方法
「AngularJS でのテーブルに関するディレクティブのカスタマイズ」では、テーブルに関するディレクティブをカスタマイズします。テーブルは次のように表現されます。
<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>
return { restrict: 'E', scope: { columnmap: '=', datasource: '=' }, link:link, template:template };
、リンク関数で $parse または $eval メソッド を使用します。
Direcitve のプレゼンテーションは以前と同じです:
<table-helper-with-parse datasource="customers" columnmap="[{name: 'Name'},...]"></table-helper-with-parse>
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 はスコープメソッドとして使用されます。$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: function(expr, locals) { return $parse(expr)(this, locals); },