angularJs中指令介绍与用法

指令定义规范：
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>

效果图：