angular Directive 指令详解

一、定义 

 指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。

指令的基本结构如下:

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(...) { ... }
    }
  };
});

1.restrict.(限制、约束)

  restrict是一个可选参数,可选值为 E、A、C、M,可多选,可不选,默认为A。

A:attribute 属性(默认值-default value  推荐使用),即属性的形式来使用指令,例如:<div my-directive="expression"></div>。

E:element 元素。使用方式 :<my-directive></my-directive>。

C:class 类名。使用方式:<div class="my-directive:expression;"></div>

M:comment 注释 ,这个貌似没啥用 使用方式<--directive:my-directive expression-->

属性指令良好的兼容性使我们大多采用 A 方式来使用指令。

2.priority.(优先级) 可以设置为一个数值,默认为0,在同一元素上优先级高的指令会被优先调用。同一元素同样优先级的指令顺序调用。不常用

3.terminal(终端,终点--boolean布尔型)值为true或者false; 不常用

  这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令
  优先级相同的指令还是会被执行(when the value is true)。

4.template(模板、样本 the value can be string or a function    暂时的--temporary ps:还能学单词。。)不常用。

  如果模板字符串中含有多个DOM元素,或者只由一个单独的文本节点构成,那它必须被包
  含在一个父元素内。换句话说,必须存在一个根DOM元素。下面是2个例子:

template: ‘<div> <-- single root element --><a href="http://google.com">Click me</a><h1>When using two elements, wrap them in a parent element</h1></div>\

含有多个元素的文本必须用反斜杠\包围.如果只有一个元素则不用,如:

template:‘<a href="www.google.com">Click me</a>‘

如果值为function。则形式如下:function(tElement, tAttrs) (...},返回一个代表模板的字符串。

5.templateUrl(the value can be string or a function)--常用

  一般要引入html文本,我们都是在外面定义好一个文本文件,然后用 url(string) 的形式引入。如

templateUrl:“view/modal/example.html”;

function 形式与template,不再赘述。

6先到这里,吃饭后继续。

				
时间: 2024-07-29 03:53:35

angular Directive 指令详解的相关文章

angular 自定义指令详解 Directive

在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足你的各种需求的指令. 本篇文章的参考来自  AngularJS权威指南 , 文章中主要介绍指令定义的选项配置 废话不多说,下面就直接上代码 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDi

angular 自定义指令 详解--restrict、restrict、replace

Angularjs 允许根据实际业务需要自定义指令, 通过angular全局对象下的 directive 方法实现.可以自定义属性.自定义标签.自定义功能 接下来定义一个名叫custom的指令,并利用这个自定义指令来实现元素的替换 html代码: <body ng-app="app"> <p custom></p> <custom></custom> js代码: var app = angular.module("a

Angular directive 实例详解

准备代码,会在实例中用到 var app = angular.module('app', []); angular指令定义大致如下 app.directive('directiveName', function() { return { // config } }) 其中return返回的配置对象包含很多参数,如下一一说明. 1. restrict 值为字符串,可选参数,指明指令在DOM中以什么形式被声明 <!-- E (element) --> <directiveName>&l

迈向angularjs2系列(2):angular2组件和指令详解

<%= INIT %> 内容 一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l

Angularjs 事件指令 input 相关指令 和样式指令 DOM 操作指令详解

Angularjs 事件指令 input 相关指令 和样式指令DOM 操作指令详解学习要点:1. AngularJs 事件指令2. input 相关指令3. 样式指令4. DOM 操作指令5. ngBind/ngBindHtml/ngBindTemplate 重点6. ng-init ng-mode ng-model-options ng-controler 1. Angularjs 事件指令自己研究:ng-click/dbclickng-mousedown/upng-mouseenter/le

Git大法好——2.Git本地操作指令详解

Git大法好--2.Git本地操作指令详解 引言 上节给大家讲解了有关于Git的一些概念,Git的引入,Git的四个组成部分,Git文件的状态,以及 Git的下载安装:前面也讲过Git和SVN有个明显的差别就是,Git可以不需要网络就可以进行版本 控制,这是因为Git中每个电脑都拥有一个本地的版本库,而远程的仓库仅仅是作为我们交换修改 的一个工具!即使失去这个工具,我们也可以干活,只是交换修改不方便罢了,假如是SVN,远程 服务器挂了-所以,我们使用Git的时候大部分时间都是在进行Git的一些本

[转]JVM指令详解(上)

作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 本文主要记录一些JVM指令,便于记忆与查阅. 一.未归类系列A 此系列暂未归类. 指令码    助记符                            说明 0x00         nop                                什么都不做 0x01        aconst_null                   将null推送至栈顶 二.const系列 该系列命令主要

tar 指令详解

tar 解压缩命令 tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的参数是根据需要在压缩或解压档案时可选的. -z:有gzip属性的 -j:有bz2属性的 -Z:有compress属性的 -v:显示所有过程 -O:将文件解开到标准输出 下面的参数-f是必须的 -f: 使用档案名字,切记,这个参数是最后一个参数,后面只能接档案名. # ta

&lt;linux下sysctl指令详解&gt;

Sysctl指令是对系统核心参数的设置: 用法: -a 参数列出系统中所有核心设置 当然了这些核心的设置都是文件,存放于/proc/sys/net目录下. 举个有代表性的例子: net.ipv4.icmp_echo_ignore_all = 0      把所有的点改为 / 就可以了.   [[email protected] net]# net.ipv4.icmp_echo_ignore_all = 0 [[email protected] net]# cd ipv4/ [[email pro