AngularJs directive指令实例

天马3798

于 2016-06-09 17:52:38 发布

阅读量741

点赞数

分类专栏： AngularJs 文章标签： AngularJs directive

本文链接：https://blog.csdn.net/u011127019/article/details/51622230

版权

AngularJs 专栏收录该内容

55 篇文章 3 订阅

订阅专栏

1.简单实例

<body ng-app="myApp">
    <runoob-directive></runoob-directive>
    <script>
        var app = angular.module('myApp', []);
        app.directive('runoobDirective', function () {
            return {
                restrict:'E',
                template:'<h1>自定义指令</h1>'
            };
        });
    </script>
</body>

2.replace当前标签替换

<body ng-app="myApp">
    <runoob-directive>asdf</runoob-directive>
    <script>
        var app = angular.module('myApp', []);
        app.directive('runoobDirective', function () {
            return {
                restrict: 'E',
                template: '<h1>自定义指令</h1>',
                replace: true //指定是否将当前页面元素替换成 template
            };
        });
    </script>
</body>

3.restrict指令约束

<body ng-app="myApp">
    <my-site value="http://www.tianma3798.cn" text="爱短句"></my-site>
    <div class="my-site"
         value="http://www.tianma3798.cn"
         text="爱短句"></div>
    <div my-site
         value="http://www.tianma3798.cn"
         text="爱短句"></div>
    <script>
        var app = angular.module('myApp', []);
        app.directive('mySite', function () {
            return {
                restrict: 'EAC',
                template: function (elem, attr) {
                    return '<a  href="' + attr.value + '">' + attr.text + '</a>';
                },
                replace:true
            };
        });
    </script>
</body>