So verwenden Sie $parse oder $eval, um Scope-Variablen zur Laufzeit in AngularJS_AngularJS Werte zuzuweisen-js-Tutorial-php.cn

So verwenden Sie $parse oder $eval, um Scope-Variablen zur Laufzeit in AngularJS_AngularJS Werte zuzuweisen

WBOY

Freigeben： 2016-05-16 15:18:21

Original

1291 Leute haben es durchsucht

In „Anpassen einer Direktive über eine Tabelle in AngularJS“ wird eine Direktive über eine Tabelle wie folgt ausgedrückt:

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

Nach dem Login kopieren

Oben ist der Wert der Variablen colmnmap in Scope vordefiniert:

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

Nach dem Login kopieren

In AngularJS gibt es auch eine Möglichkeit, einer Scope-Variablen zur Laufzeit einen Wert zuzuweisen, nämlich die Verwendung der $parse- oder $eval-Methode in der Link-Funktion.

Die Darstellung der Richtlinie ist die gleiche wie zuvor:

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

Nach dem Login kopieren

Die Richtlinie sieht ungefähr so aus:

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

Nach dem Login kopieren

Lassen Sie mich Ihnen den Unterschied zwischen $parse und $eval vorstellen

Zuallererst werden $parse und $eval beide zum Parsen von Ausdrücken verwendet, $parse existiert jedoch als separater Dienst. $eval wird als Scope-Methode verwendet.

Die typische Verwendung von $parse besteht darin, den Wert eines Zeichenfolgenausdrucks festzulegen, der einem realen Objekt zugeordnet ist. Sie können den dem Ausdruck entsprechenden Wert auch direkt von $parse abrufen.

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

Nach dem Login kopieren

$eval ist „scope.$eval“, das Ausdrücke im aktuellen Bereich ausführt, wie zum Beispiel: „scope.$eval('a b');“ und „a“ und „b“ stammen hier von „scope = {a: 2, b:“ 3};

Sehen Sie sich den Quellcode an und seine Implementierung ist

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

Nach dem Login kopieren

Sie können feststellen, dass es auch auf $parse basiert, aber seine Parameter wurden auf diesen, den aktuellen Bereich, festgelegt, sodass $eval nur ein auf $parse basierendes Paket ist und eine schnelle API für $parse ist .