Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析。

一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数,其中返回一个对象,该对象包含该指令应有的一些行为,具体参见如下所有的属性。

angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    restrict: String,
    priority: Number,
    terminal: Boolean,
    template: String or Template Function:
      function(tElement, tAttrs) (...},
    templateUrl: String,
    replace: Boolean or String,
    scope: Boolean or Object,
    transclude: Boolean,
    controller: String or
      function(scope, element, attrs, transclude, otherInjectables) { ... },
    controllerAs: String,
    require: String,
    link: function(scope, iElement, iAttrs) { ... },
    compile: // 返回一个对象或连接函数,如下所示:
      function(tElement, tAttrs, transclude) {
        return {
          pre: function(scope, iElement, iAttrs, controller) { ... },
          post: function(scope, iElement, iAttrs, controller) { ... }
        }
        // 或者
        return function postLink(...) { ... }       }
   };
});

 
.directive('myDirective', function() {
  return {
    
    restrict: String,
    //可选属性,表明该指令可以以什么形式被声明,默认值为A,即属性。可以独立使用,也可以混合使用。
    E (Element 元素) <my-directive></my-directive>
    A (Attribute 属性) <div my-directive="expression"></div>
    C (Class 样式类) <div class="my-directive"></div>
    M (comment 注释) <!--directive:my-directive-->
    priority: Number,  
    
    //优先级属性,默认是0,ng-repeat的优先级是1000,这样做是为了保证他总是优于其他的指令运行
    相同优先级的指令,先声明的先运行。否则优先级高的先运行。       terminal: Boolean,  
  
    //是否停止运行比当前指令优先级低的指令,同优先级的指令依旧会被调用   template: String or Template Function:       function(tElement, tAttrs) (...},
 
    //一段html代码或者是一个可以返回html片段的函数,注意
    templateUrl: String,
    //可以是外部HTML文件的路径,也能是一个返回外部HTML文件路径的函数,模板html的加载是异步的
    需要花费时间来编译和链接,所以使用环境是一个好的选择。     replace: Boolean or String,    
    //默认值为false ,表明引用该指令的dom元素是否会被模板替换还是在内部嵌套,  
    scope: Boolean or Object,  

    //默认值是false,可以是true,也可以是一个对象。
    为true的时候,为此指令创建一个新的作用域,并且该作用域继承父级作用域
   
transclude: Boolean,       //默认false,可以将当前dom中的html内容嵌入到指令中使用ng-transclude的位置。    controller: String or       function(scope, element, attrs, transclude, otherInjectables) { ... },     controllerAs: String,     require: String,     link: function(scope, iElement, iAttrs) { ... },     compile: // 返回一个对象或连接函数,如下所示:       function(tElement, tAttrs, transclude) {         return {           pre: function(scope, iElement, iAttrs, controller) { ... },           post: function(scope, iElement, iAttrs, controller) { ... }         }         // 或者         return function postLink(...) { ... }       }    }; });

Angular JS 中 指令详解的更多相关文章

  1. js中eval详解,用Js的eval解析JSON中的注意点

    先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...

  2. js中arguments详解

    在js中一切都是对象,连函数也是对象,函数名其实是引用函数定义对象的变量. 什么是arguments? 这个函数体内的arguments非常特殊,实际上是所在函数的一个内置类数组对象,可以用数组的[i ...

  3. angular.js中指令compile与link原理剖析

    在angularJs应用启动之前,它们是以HTML文本形式存在文本编辑器当中.应用启动会进行编译和链接,作用域会同HTML进行绑定.这个过程包含了两个阶段! 编译阶段 在编译的阶段,angularJs ...

  4. vue.js自定义指令详解

    写在文本前:相信在做vue的项目,你肯定接触了指令,我们常用vue内置的一些指令,比如v-model,v-text,v-if,v-show等等,但是这些内置指令不在本文的讲解范畴,本文想说的是其自定义 ...

  5. Node.js中Async详解:流程控制

    安装 npm install async --save 地址 https://github.com/caolan/async Async的内容主要分为三部分 流程控制: 简化九种常见的流程的处理 集合 ...

  6. js中apply详解

    学习http://www.cnblogs.com/delin/archive/2010/06/17/1759695.html 1.对象的继承,一般的做法是复制:Object.extend protot ...

  7. js中this详解

    this对象是在闭包一节中提到的,书上的原话是:"this对象是在运行时基于函数的执行环境绑定的,在全局函数中,this等于window,而当函数作为某个对象的方法调用时,this等于那个对 ...

  8. js中eval详解

    先来说eval的用法,内容比较简单,熟悉的可以跳过   eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. ...

  9. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

随机推荐

  1. Laravel --- Laravel5.3 和 Workerman结合使用(异步)

    网上查阅资料有现成和workerman结合的composer组件,但个人感觉不太靠谱,github上star太少,而且怕有问题也不好调,就想自己先试试. 我的办法因为修改要一点Workerman源码, ...

  2. AWR报告分析案例及命令(收集)

    AWR报告分析案例(收集) 循序渐进解读Oracle AWR性能分析报告 AWR报告分析之一:高 DB CPU 消耗的性能根源 生成AWR报告命令: 1)连接数据库:sqlplus / as sysd ...

  3. springboot 集成完整的swagger2

    springboot 在集成swagger中会不会遇到各种问题: 1.swagger  进行接口鉴权(比如设置header的token,接口进行拦截处理). 2.swagger 进行实体属性解析(po ...

  4. IM推送保障及网络优化详解(二):如何做长连接加推送组合方案

    对于移动APP来说,IM功能正变得越来越重要,它能够创建起人与人之间的连接.社交类产品中,用户与用户之间的沟通可以产生出更好的用户粘性. 在复杂的 Android 生态环境下,多种因素都会造成消息推送 ...

  5. Ace-Admin框架-首页(一)

    ACE-Admin是一个强大的后台模板框架,看起来非常漂亮,但是每个页面内容太多,看起来不知道怎么修改,现在来对首页进行主要内容改装,将不需要的内容都给删除,然后就只剩下一个框架,在开发中,我们就完全 ...

  6. smarty 截取字符串

    在视图中使用smarty来截取字符串的方法:          {$array|truncate:15:"...":true}   php:控制器中 $index['content ...

  7. 使用SpringSecurity搭建授权认证服务(1) -- 基本demo认证原理

    使用SpringSecurity搭建授权认证服务(1) -- 基本demo 登录认证是做后台开发的最基本的能力,初学就知道一个interceptor或者filter拦截所有请求,然后判断参数是否合理, ...

  8. Python浮点数(小数)运算误差的原因和解决办法

    原因解释:浮点数(小数)在计算机中实际是以二进制存储的,并不精确.比如0.1是十进制,转换为二进制后就是一个无限循环的数:0.0001100110011001100110011001100110011 ...

  9. leetcode的Hot100系列--461. 汉明距离

    求两个数的二进制位不同的位置,最先想到的就是异或操作, 异或:按位运算,相同为0,不同为1. 比如: a = 6 对应的二进制表示为: 0 0 1 1 1 ​ b = 9 对应的二进制表示为: 0 1 ...

  10. Ubuntu 16.4-desktop系统安装显卡CUDA具体步骤!

    1.禁用nouveau驱动(切换至tty界面) sudo vim /etc/modprobe.d/blacklist.conf 在文本最后添加:blacklist nouveau options no ...