首页 > Web开发 > 详细

AngularJS中使用$parse或$eval在运行时对Scope变量赋值

时间:2016-01-25 11:23:25      阅读:209      评论:0      收藏:0      [点我收藏+]

 

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

 

AngularJS中使用$parse或$eval在运行时对Scope变量赋值

原文:http://www.cnblogs.com/darrenji/p/5156650.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!