你的位置:首页 > Java教程

[Java教程]AngularJS中使用$parse或$eval在运行时对Scope变量赋值


 

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