自定义指令

directive()这个方法是用来定义指令的:

angular.module('myApp', [])
.directive('myDirective', function ($timeout, UserDefinedService) {
// 指令定义放在这里
});

directive() 方法可以接受两个参数:
1. name(字符串)
指令的名字,用来在视图中引用特定的指令。
2. factory_function (函数)
这个函数返回一个对象,其中定义了指令的全部行为。$compile服务利用这个方法返回的对
象,在DOM调用指令时来构造指令的行为。

angular.application('myApp', [])
.directive('myDirective', function() {
// 一个指令定义对象
return {
// 通过设置项来定义指令,在这里进行覆写
};
});

  

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

}
};
});

  

restrict(字符串)
restrict是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默
认AngularJS认为restrict的值是A,即以属性的形式来进行声明。
可选值如下:
E(元素)
<my-directive></my-directive>
A(属性,默认值)
<div my-directive="expression"></div>
C(类名)
<div class="my-directive:expression;"></div>
M(注释)
<--directive:my-directive expression-->
这些选项可以单独使用,也可以混合在一起使用:
angular.module('myDirective', function(){
return {
restrict: 'EA' // 输入元素或属性
};
});
上面的配置可以同时用属性或注释的方式来声明指令:
<-- 作为一个属性 -->
<div my-directive></div>
<-- 或者作为一个元素 -->
<my-directive></my-directive>
属性是用来声明指令最常用的方式,因为它能在包括老版本的IE浏览器在内的所有浏览器中
正常工作,并且不需要在文档头部注册新的标签。

terminal(布尔型)
terminal是一个布尔型参数,可以被设置为true或false。
这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令
优先级相同的指令还是会被执行。
如果元素上某个指令设置了terminal参数并具有较高的优先级,就不要再用其他低优先级的
指令对其进行修饰了,因为不会被调用。但是具有相同优先级的指令还是会被继续调用。
使用了terminal参数的例子是ngView和ngIf。ngIf的优先级略高于ngView,如果ngIf的表
达式值为true,ngView就可以被正常执行,但如果ngIf表达式的值为false,由于ngView的优先
级较低就不会被执行。

template(字符串或函数)
template参数是可选的,必须被设置为以下两种形式之一:
 一段HTML文本;
 一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个代表模板的字符
串。tElement和tAttrs中的t代表template,是相对于instance的。在讨论链接和编译
设置时会详细介绍,模板元素或属性与实例元素或属性之间的区别。
AngularJS会同处理HTML一样处理模板字符串。模板中可以通过大括号标记来访问作用域,
例如{{ expression }}。
如果模板字符串中含有多个DOM元素,或者只由一个单独的文本节点构成,那它必须被包
含在一个父元素内。换句话说,必须存在一个根DOM元素:
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>\
另外,注意每一行末尾的反斜线,这样AngularJS才能正确解析多行字符串。在实际生产中,
更好的选择是使用templateUrl参数引用外部模板,因为多行文本阅读和维护起来都是一场噩梦。

templateUrl(字符串或函数)
templateUrl是可选的参数,可以是以下类型:
 一个代表外部HTML文件路径的字符串;
 一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个外部HTML文件
路径的字符串。
无论哪种方式, 模板的URL都将通过AngularJS内置的安全层, 特别是$getTrusted
ResourceUrl,这样可以保护模板不会被不信任的源加载。
默认情况下,调用指令时会在后台通过Ajax来请求HTML模板文件。有两件事情需要知道。
 在本地开发时,需要在后台运行一个本地服务器,用以从文件系统加载HTML模板,否则
会导致Cross Origin Request Script(CORS)错误。
 模板加载是异步的,意味着编译和链接要暂停,等待模板加载完成。
通过Ajax异步加载大量的模板将严重拖慢一个客户端应用的速度。为了避免延迟,可以在部
署应用之前对HTML模板进行缓存。在大多数场景下缓存都是一个非常好的选择,因为AngularJS
通过减少请求数量提升了性能。
模板加载后,AngularJS会将它默认缓存到$templateCache服务中。在实际生产中,可以提
前将模板缓存到一个定义模板的JavaScript文件中,这样就不需要通过XHR来加载模板了。

replace(布尔型)
replace是一个可选参数,如果设置了这个参数,值必须为true,因为默认值为false。默
认值意味着模板会被当作子元素插入到调用此指令的元素内部:

<div some-directive></div>
.directive('someDirective', function() {
return {
template: '<div>some stuff here<div>'
};
});

调用指令之后的结果如下(这是默认replace为false时的情况):
<div some-directive>
<div>some stuff here<div>
</div>
如果replace被设置为了true:

.directive('someDirective', function() {
return {
replace: true // 修饰过
template: '<div>some stuff here<div>'
};
});

指令调用后的结果将是:
<div>some stuff here<div>

angular指令详解--自定义指令的更多相关文章

  1. 6 Dockerfile指令详解 && ENTRYPOINT 指令

    ENTRYPOINT 的格式和 RUN 指令格式一样,分为 exec 格式和 shell 格式. ENTRYPOINT 的目的和 CMD 一样,都是在指定容器启动程序及参数. ENTRYPOINT 在 ...

  2. 5 Dockerfile指令详解 && CMD 指令

    CMD 指令的格式和 RUN 相似,也是两种格式: shell 格式: CMD <命令> exec 格式: CMD ["可执行文件", "参数1", ...

  3. 4 Dockerfile指令详解 && COPY 指令

    COPY 指令将从构建上下文目录中 <源路径> 的文件/目录复制到新的一层的镜像内的 <目标路径> 位置.比如: COPY package.json /usr/src/app/ ...

  4. Dockerfile指令详解--VOLUME 指令

    Alpine Linux是一个轻型Linux发行版,它不同于通常的Linux发行版,Alpine采用了musl libc 和 BusyBox以减少系统的体积和运行时的资源消耗.Alpine Linux ...

  5. 7 Dockerfile指令详解 && VOLUME 指令

    格式为: VOLUME ["<路径1>", "<路径2>"...] VOLUME <路径> 之前我们说过,容器运行时应该尽量 ...

  6. nginx.conf中关于nginx-rtmp-module配置指令详解

    译序:截至 Jul 8th,2013 官方公布的最新 Nginx RTMP 模块 nginx-rtmp-module 指令详解.指令Corertmp语法:rtmp { ... }上下文:根描述:保存所 ...

  7. Nginx RTMP 模块 nginx-rtmp-module 指令详解

    译序:截至 Jul 8th,2013 官方公布的最新 Nginx RTMP 模块 nginx-rtmp-module 指令详解.指令Corertmp语法:rtmp { ... }上下文:根描述:保存所 ...

  8. Vue.js 源码分析(二十四) 高级应用 自定义指令详解

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...

  9. 迈向angularjs2系列(2):angular2指令详解

    一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...

随机推荐

  1. pycharm调试scrapy

    pycharm调试scrapy 创建一个run.py文件作为调试入口 run.py中,name是要调试的爬虫的名字(注意,是爬虫类中的name,而不是爬虫类所在文件的名字) 拼接爬虫运行的命令,然后用 ...

  2. sql 锁类型与锁机制

    SQL Server锁类型(SQL)收藏1. HOLDLOCK: 在该表上保持共享锁,直到整个事务结束,而不是在语句执行完立即释放所添加的锁.   2. NOLOCK:不添加共享锁和排它锁,当这个选项 ...

  3. Django-admin列表展示上传图片

    1.在models.py文件中创建表ImageField类型字段 class user(models.Model): img = models.ImageField(upload_to='static ...

  4. 修改sql server实例、数据库、表、字段的排序规则

    转自:http://blog.51cto.com/jimshu/1095780 概念与详情请参考:字符编码与排序规则:https://www.cnblogs.com/gered/p/9145123.h ...

  5. node.js---sails项目开发(1)

    1.安装Node.js和npm---这里就做介绍啦! 2.需要全局下安装Sails sudo npm install sails -g 3. 在本地创建一个文件夹 mkdir ~/lsg/sails ...

  6. iOS学习之应用偏好设置

    如今,即便是最简单的计算机程序也会包含一个偏好设置窗口,用户可以在其中设置应用专属的选项.在MAC OS X中,Preferences...菜单通常位于应用菜单中.选择该菜单项会弹出一个窗口,用户可以 ...

  7. git分支更新代码命令

    第一步: 查看状态  git status 第二步: 全部添加  git add --all 第三步: 再次查看状态  git status 第四步: 提交      git commit -m '备 ...

  8. Java面向对象—多态

    概述:同一个事物,在不同的时刻表现出不同的状态. 代码中如何体现: 要有继承, 要有方法重写, 父类引用指向子类对象 多态的成员访问特点 成员变量:编译看左边(父类), 运行看左边 成员方法:编译看左 ...

  9. HDOJ_1087_Super Jumping! Jumping! Jumping! 【DP】

    HDOJ_1087_Super Jumping! Jumping! Jumping! [DP] Time Limit: 2000/1000 MS (Java/Others) Memory Limit: ...

  10. 使用阿里的maven库

    快使用阿里云的maven仓库 自从开源中国的maven仓库挂了之后就一直在用国外的仓库,慢得想要砸电脑的心都有了.如果你和我一样受够了国外maven仓库的龟速下载?快试试阿里云提供的maven仓库,从 ...