Angular 封装 D3 指令

2019年9月15日 97次阅读 来源: aprildove

看到一个angular封装指令的栗子。

js代码：

//sb变量建立在window对象上
var sb = {
    name : "somebody",
    gender : "male",
    age : 28
};
angular.module("ezstuff",[])
.directive("ezNamecard",function(){
    return {
        restrict : "E",
        template : "<div class='namecard'>",
        replace : true,
        link : function(scope,element,attrs){
            //读取data属性值，获得变量名，通过eval得到其值
            var sb = eval(attrs.data);

            //填充DOM元素内容
            element.append("<div>name : " + sb.name + "</div>")
                .append("<div>gender : " + sb.gender + "</div>")
                .append("<div>age : " + sb.age + "</div>")
        }
    };
});

css部分：

.namecard{
    border : 1px solid #000;
    border-radius : 10px;
    padding:10px;
    width:300px;
    background:#f0f0f0;
}

HTML部分：

<html>
<head>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
</head>
<body ng-app="ezstuff">
    <!--使用data属性向指令实现代码传递变量名-->
    <ez-namecard data="window.sb"></ez-namecard>
</body>
</html>

《Angular 封装 D3 指令》

不过，请注意，前面定义的sb变量，默认是挂在window对象（命名空间）上的，即window.sb。 如果所有的数据都挂在window上，保不齐哪天就会出现变量的命名冲突。

AngularJS引入了一个自用的命名空间，也就是$rootScope对象，这样sb变量就可以 挂在$rootScope上了，即$rootScope.sb。

在HTML模板中，我们用了两个内置指令：

  • ng-app指令会在启动引导时创建一个$rootScope对象。

  • ng-init指令用来在作用域上初始化变量，这个指令将在$rootScope上建立sb对象。

在指令的实现代码中，与之前使用eval函数进行表达式估值不同，我们直接使用scope的$eval方法获 得sb变量的值。

你可能注意到，这个scope是link函数传入的参数，它和我们说的$rootScope是一个东西吗？

加入了作用域的directive：
JavaScript代码

angular.module("ezstuff",[])
.directive("ezNamecard",function(){
    return {
        restrict : "E",
        template : "<div class='namecard'>",
        replace : true,
        link : function(scope,element,attrs){
            var sb = scope.$eval(attrs.data);
            element.append("<div>name : " + sb.name + "</div>")
                .append("<div>gender : " + sb.gender + "</div>")
                .append("<div>age : " + sb.age + "</div>")
        }
    };
});

CSS代码

.namecard{
    border : 1px solid #000;
    border-radius : 10px;
    padding:10px;
    width:300px;
    background:#f0f0f0;
}

HTML代码

<html>
<head>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
</head>
<!-- ng-app指令在body这个DOM对象上建立了$rootScope对象 -->
<body ng-app="ezstuff" ng-init="sb = {name:'somebody',gender:'male',age:28}">
    <!-- 注意我们传入的变量名没加命名空间-->
    <ez-namecard data="sb"></ez-namecard>
</body>
</html>

未完

    原文作者：aprildove
    原文地址: https://segmentfault.com/a/1190000005059436
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞