angularJS1自定义directive指令的创建方式

最新推荐文章于 2020-08-06 13:41:00 发布

xiejunna

最新推荐文章于 2020-08-06 13:41:00 发布

阅读量872

点赞数

分类专栏： angularJS1 文章标签： angularjs

本文链接：https://blog.csdn.net/xiejunna/article/details/53727766

版权

angularJS1 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

angularJS中一些重复用的模板，可以封装起来，用这种自定义指令的方法实现。demo如下：

<html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <script type="text/javascript" src="js/angular.min-1.6.x.js"></script>

    </head>

    <body ng-app='myapp1' >
        <cus></cus>

    </body>
    <script type="text/javascript">
        var app = angular.module('myapp1', []);

        app.directive("cus",function(){
            return {
                restrict:'E',//'E':element元素 调用时：<cus></cus>
                //'A':attribute属性 调用时<div cus></div>
                //'C':class类 调用时<div class='cus'></div>
                replace:true,//默认false，替换掉自定义的directive的名称
                template:'<div>Hello world</div>',
                link:function(){
                    alert('显示在这里呢！');
                    console.log('显示在这里呢！');
                }
            }
        });
    </script>

</html>

xiejunna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS1自定义directive指令的创建方式

angularJS中一些重复用的模板，可以封装起来，用这种自定义指令的方法实现。demo如下：<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, mi
复制链接

扫一扫