AngularJs directive指令实例

发布时间：2020-12-17 10:07:34 所属栏目：安全来源：网络整理

导读：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当前

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',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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!