zoukankan      html  css  js  c++  java
  • 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绑定的事件是只要进行修改立即调用。

  • 相关阅读:
    如何培养编程所需要的逻辑思维?
    CSS教程
    Android中Service(服务)详解
    Tomcat热部署的实现原理
    Java多线程和线程池(转)
    导出Excel表格
    各种时间格式化的转化
    上传多媒体文件到微信公众平台
    发起https请求并获取结果
    Java 将字节转换为十六进制字符串
  • 原文地址:https://www.cnblogs.com/zaixiuxing/p/5210769.html
Copyright © 2011-2022 走看看