指令定义规范:
1.前缀最好不要有ng-,这是angularJs自带的指令前缀
2.带前缀的可以使用驼峰命名规则,例子见2.html

1.html

<div ng-app="module">
    <div welcome></div><!--A属性-->
    <hr>
    <h1 welcome></h1><!--A属性-->
    <hr>
    <welcome></welcome><!--E元素-->
    <hr>
    <div class="welcome"></div><!--C-class类-->

</div>
<script>
    var m = angular.module('module', []);
    /*定义指令*/
    m.directive('welcome', [function () {
        return {
            /*restrict生成指令在页面中的表现形式*/
            /*A-属性,一般用于重构代码,对原有的指令进行扩充*/
            /*E-元素,一般用于独立组件*/
            /*C-类,不建议使用,容易定义样式,耦合性强*/
            restrict: 'AEC',//a attr e element  c class

            /*模板*/
            template: '欢迎浏览泠泠在路上博客'
        }
    }]);

</script>

效果图:

这里写图片描述

2.html

<div ng-app="module">
    /*使用指令:带前缀*/
    <h2 my-content></h2>
</div>
<script>
    var m = angular.module('module', []);
    /*定义指令,驼峰命名*/
    m.directive('myContent', [function () {
        return {

            restrict: 'AEC',

            /*模板*/
            template: '欢迎浏览泠泠在路上博客'
        }
    }]);

</script>

效果图:

这里写图片描述

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐