AngularJs指令相关

1.restrict:如果不指定这个属性，默认情况下，指令将仅允许被用作元素名和属性名；可选值E、C、M、A

2.replace:true - 编译时，将使用template替换指令元素,注意，此时模板必须有一个根节点；

　　　　   false - 编译时，将使用template替换指令元素的内容;

3.指令compile,pre-link,post-link执行顺序：

<levelOne>
 <levelTwo>
  <levelThree>
    Hello {{name}}
  </levelThree>
 </levelTwo>
</levelOne>

 

var app = angular.module('myApp', []);
function createDirective(name) {
　　return function() {
　　　　return {　　
　　　　　　restrict: 'E',
　　　　　　compile: function(tElem, tAttrs) {
　　　　　　　　console.log(name + ': compile==>'+tElem.html());
　　　　　　　　return {
　　　　　　　　　　pre: function(scope, iElem, iAttrs) {
　　　　　　　　　　　　console.log(name + ': pre link==>'+tElem.html());
　　　　　　　　　　},
　　　　　　　　　　post: function(scope, iElem, iAttrs) {
　　　　　　　　　　　　console.log(name + ': post link==>'+tElem.html());
                }
　　　　　　　　}
　　　　　　}
　　　　}
　　}
}
app.directive('levelOne', createDirective('levelOne'));
app.directive('levelTwo', createDirective('levelTwo'));
app.directive('levelThree', createDirective('levelThree'));

执行结果:

levelOne: compile==>
            <level-two>
                <level-three>
                    Hello {{name}}
                </level-three>
            </level-two>
        
levelTwo: compile==>
                <level-three>
                    Hello {{name}}
                </level-three>
            
levelThree: compile==>
                    Hello {{name}}
                
levelOne: pre link==>
            <level-two>
                <level-three class="ng-binding">
                    Hello {{name}}
                </level-three>
            </level-two>
        
levelTwo: pre link==>
                <level-three class="ng-binding">
                    Hello {{name}}
                </level-three>
            
levelThree: pre link==>
                    Hello {{name}}
                
levelThree: post link==>
                    Hello {{name}}
                
levelTwo: post link==>
                <level-three class="ng-binding">
                    Hello {{name}}
                </level-three>
            
levelOne: post link==>
            <level-two>
                <level-three class="ng-binding">
                    Hello {{name}}
                </level-three>
            </level-two>

ps.如果你在定义指令的时候只使用了一个link函数,那么ng会把这个函数当成post-link来处理

分析：当ng遍历完所有的dom并运行完所有的compile函数之后,就反向调用相关联的post-link函数. dom现在开始反向,并执行post-link函数

compile：编译，读取原生的html代码，生成DOM对象，此时scope还不能使用。所以他的function是这样子的：function(element,attrs){}

pre-link:可以运行一些业务代码，但注意此时它的字节点还没有运行link中的代码，此时scope可以使用：function(scope,element,attrs){}

post-link:一般会将业务逻辑代码放在post-link中执行，此时它的子节点compile,link函数都已执行完成，这就是post-link被认为是最安全以及默认的编写业务逻辑代码的原因:function(scope,element,attrs){}

 4.默认情况下指令并不会创建一个新的scope，它会继承所在controller的scope，即继承父作用域。

5.Angular中所有的元素引用都会被jQuery或者jqLite包装；他们永远不是纯DOM引用

6.angularjs本不必依赖于jquery，因为它自己包含了一个jquery的子集jqLite，但如果在angularjs之前引入一个jquery，或者使用模块化管理如requireJs时，显式指定angularjs依赖于jquery，则jqLite会被替换为jquery。

7.表单验证，如果要使用angularjs来进行表单验证，则一定要绑定数据才行，也就是说ng-model是必选项。而验证选项也不是每个类型的input都适用的，具体查文档。

8.ng-change绑定的事件是只要进行修改立即调用。