angularjs 学习 指令学习一

指令(directive)

指令是AngularJs自定义的HTML元素或属性；

一个简单的指令定义方法如下：

angular.module('app').directive('directiveName',function(){
    return {
        restrict:'E',
        template:string,
    };
})

该方法定义了一个名为directiveName的指令，该指令作为html中元素方式存在， 以<directive></directive>调用指令
当然，上述方法只是一个简单的指令定义方法，复杂的指令需要指令中其它属性的配合；

完整的创建指令的伪代码为

    angular.module('app').directive('directiveName',function(){
    return {
        restrict:'E',
        priority:number,
        template:string,
        templateUrl:string,
        replace:bool,
        transclude:bool,
        scope:bool or object,
        controller:function($scope,$element,$attr,$transclude)
        require:string,
        link:function postLink(scope,iElement,iAttrs){...},
        compile:function compile(tElement,tAttrs,transclude){
            return {
                pre:function preLink(scope,iElement,iAttrs,controller){...},
                post:function postLink(scope,iElement,iAttrs,controller){...}
            }
        }
    };
})

详细解释

1. restrict:描述了指令作为元素名称、元素属性或样式存在，可选值为
   E 元素 <directive></directive>
   A 属性 <div directive=""></div>
   C 样式类 <directive class=directive></directive>
   三者可以组合

2. priority:描述了指令的优先级，大的优先级会先运行，优先级相同的指令，按照其定义的顺序执行

3. terminal: 停止运行比该优先级还低的指令，但相同优先级的指令仍会运行

.directive('helloWorld',function(){
         return {
                 restrict:'EA',
                 template:'<div>hello world</div>',
                 priority:100,
                 terminal:true
     }
 })
     .directive('helloTwo',function(){
         return {
             restrict:'EA',
             template:'<div>JunJunDaXia</div>',
             priority:120,
             terminal:true
         }
     })
 ```
 helloTwo 指令会覆盖 helloWorld指令

4. template: 模板会替代指令包裹的内容
5. templateUrl:加载服务器上的模板
6. replace: 默认为false,模板会帮当做子元素插入到此指令的元素内部；如果为true,则模板替换指令所在位置

```javascript
    angular.module('app').directive('helloWorld',function(){
        return {
            restrict:'E',
            template:<div>hello world</div>,
            replace:true
        };
    })




<div class="se-preview-section-delimiter"></div>

替换后的Html为
<div>hello world</div>
如果 repalce为false，则替换后的HTML为
<hello-world><div>hello world</div></hello-world>

1. transclude: 此属性为ture时，指令会删除原来的内容，如果模板中使用了ng-transclude指令，则删除的内容会被重新插入

 <div hello-world>123</div>
.directive('helloWorld',function(){
        return {
                restrict:'EA',
                template:'<div>hello world <span ng-transclude></span> </div>',
                transclude:true,
    }
})




<div class="se-preview-section-delimiter"></div>

解析后的html为：

<div hello-world=""><div>hello world <span ng-transclude=""><span class="ng-scope">123</span></span> </div></div>