zoukankan      html  css  js  c++  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);
  • 相关阅读:
    类的加载过程
    算法模板之基数排序
    算法模板之Dijkstra
    算法模板之SPFA
    算法模板之树状数组
    算法模板之排序
    深入JVM-自动内存管理(读书笔记)
    VMware Fault-Tolerant Virtual Machine 论文总结
    深入JVM--高效并发(读书笔记)
    欧拉素数筛
  • 原文地址:https://www.cnblogs.com/darrenji/p/5156650.html
Copyright © 2011-2022 走看看