Comment utiliser $parse ou $eval pour attribuer des valeurs aux variables Scope lors de l'exécution dans AngularJS

Comment utiliser $parse ou $eval pour attribuer des valeurs aux variables Scope lors de l'exécution dans AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:18:21

original

1290 Les gens l'ont consulté

Dans "Personnalisation d'une directive sur une table dans AngularJS", une directive sur une table est personnalisée La table est exprimée comme ceci :

<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>

Copier après la connexion

Ci-dessus, la valeur de la variable colmnmap est prédéfinie dans Scope :

return {
restrict: 'E',
scope: {
columnmap: '=',
datasource: '='
},
link:link,
template:template
};

Copier après la connexion

Dans AngularJS, il existe également un moyen d'attribuer une valeur à une variable Scope au moment de l'exécution, qui consiste à utiliser la méthode $parse ou $eval dans la fonction de lien.

La présentation de Direcitve est la même que précédemment :

<table-helper-with-parse datasource="customers" columnmap="[{name: 'Name'},...]"></table-helper-with-parse>

Copier après la connexion

La directive ressemble à peu près à ceci :

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);

Copier après la connexion

Laissez-moi vous présenter la différence entre $parse et $eval

Tout d'abord, $parse et $eval sont tous deux utilisés pour analyser des expressions, mais $parse existe en tant que service distinct. $eval est utilisé comme méthode de portée.

L'utilisation typique de $parse est de définir la valeur d'une expression de chaîne mappée à un objet réel. Vous pouvez également obtenir la valeur correspondant à l’expression directement depuis $parse.

var getter = $parse('user.name'); 
var setter = getter.assign; 
setter(scope, 'new name');
getter(context, locals) // 传入作用域，返回值
setter(scope,'new name') // 修改映射在scope上的属性的值为‘new value'

Copier après la connexion

$eval est scope.$eval, qui exécute des expressions dans la portée actuelle, telles que : scope.$eval('a b'); et les a et b proviennent ici de scope = {a: 2, b: 3};

Regardez le code source et son implémentation est

$eval: function(expr, locals) {
return $parse(expr)(this, locals);
},

Copier après la connexion

Vous pouvez constater qu'il est également basé sur $parse, mais ses paramètres ont été corrigés sur ceci, qui est la portée actuelle, donc $eval n'est qu'un package basé sur $parse, et est une API rapide pour $parse .