$parse または $eval を使用して、AngularJS_AngularJS の実行時にスコープ変数に値を割り当てる方法

WBOY
リリース: 2016-05-16 15:18:21
オリジナル
1290 人が閲覧しました

AngularJS でのテーブルに関するディレクティブのカスタマイズ」では、テーブルに関するディレクティブをカスタマイズします。テーブルは次のように表現されます。

<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>
ログイン後にコピー
上記では、変数colmnmapの値がスコープで事前に定義されています:


return {
restrict: 'E',
scope: {
columnmap: '=',
datasource: '='
},
link:link,
template:template
}; 
ログイン後にコピー

AngularJS には、実行時にスコープ変数に値を割り当てる方法もあります。

、リンク関数で $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 は、scope.$eval で、次のような現在のスコープで式を実行します。ここでの a と b は、scope = {a: 2 , b から取得されます。 :3};

ソースコードを見てください。その実装は

です。

$eval: function(expr, locals) {
return $parse(expr)(this, locals);
},
ログイン後にコピー
これも $parse に基づいていることがわかりますが、そのパラメータは現在のスコープであるこれに固定されているため、$eval は $parse に基づいた単なるパッケージであり、$parse の高速 API です。 。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!