Directive其实就是让html变得更强大的一种方法。它可以根据需求对dom变形,或注入行为。

觉得它很神秘么,其实一点儿也不神秘,只要开始使用AngularJS了,就一定在使用着Directive,比如我们在html上写的那些ng-controllerng-modelng-show等等都是AngularJS提供的Directive啊~

那到底内部是怎么实现的呢?或者如果觉得AngularJS内置提供的Directive不给力咋办?现在咱们就自己做一个试试看吧~

先来个比较简单的需求,假如我们的应用经常要用到地址信息的输入选项,如果不自定义directive,html要写成这样~

<div class="address">
<label>
国家:<input type="text" ng-model="country" />
</label>
<label>
城市:<input type="text" ng-model="city" />
</label>
<label>
街道详情:<input type="text" ng-model="address" />
</label>
<label>
邮编:<input type="text" ng-model="zipcode" />
</label>
</div>
 

这样的代码可能要写多次,给维护也添加了复杂度。 如果自定义个地址的directive,代码如下:

之前的html

 <div my-address> </div>

抽出来的html模板,名称为address.html

<div class="address">
<label>
国家:<input type="text" ng-model="country" />
</label>
<label>
城市:<input type="text" ng-model="city" />
</label>
<label>
街道详情:<input type="text" ng-model="address" />
</label>
<label>
邮编:<input type="text" ng-model="zipcode" />
</label>
</div>

directive的定义

app.directive("myAddress", function() {
return {
restrict: "A",
templateUrl: "address.html",
replace: true
}
})

命名

可能有人注意到了,在html里标签上定义的属性叫my-address,可是在js里定义directive时写的名字是myAddress,这能对应上么?

其实是可以的,不仅如此,下列格式都可以识别出来~

  • my:address
  • my-address (推荐)
  • my_address
  • x-my-address
  • data-my-address

但是由于html不区分大小写和标准写法是用中横线-的特性,比较推荐my-address这种写法,既简洁又遵循html的规则。

声明形式限制

restrict: "A" 这一句表示对directive声明形式的限制,一共有四种:

  • E<my-address></my-address> Element Name 标签名
  • A<div my-address="exp"></div> Attribute 属性名(默认值)
  • C<div class="my-address: exp;"></div> Class 类名
  • M<!-- directive: my-address exp --> Comment 注释

其实不写也可以,因为如果不写,默认就是restrict: "A"

如果想支持多项,可以写成restrict: "EA",这样就又支持标签的写法,又支持属性的写法

虽然一共有四种可以选择,但后两种并不推荐~

  • 类应该更多的是与样式相关,而且将directive名混杂在一群类名里,可读性也不好
  • 注释就更不可靠了,将重要的逻辑写在注释里,太容易被忽略了

Html内容模板指定

templateUrl: "address.html"指定了模板的Url路径,如果想直接写html内容也可以用:
template: "<div class='address'>blabla</div>"

下面的replace: true表示模板html内容是否会替换<div my-address></div>,还是插入到<div my-address></div>元素里,默认是false

最后

这样一个简单的directive就写好了,其实如果只是想抽html模板的话,还可以用ng-include,相当上上面例子里replace:false的效果~

使用ng-include的版本

1
2
//注意这里是单引号套着双引号,外面一层引号是表示标签属性的值,里面一层引号表示直接给的模板名称,因为这里也可以通过表达式的返回值来取
<div ng-include='"address.html"'> </div>

貌似更简单。。。那前面说那么多干嘛?!
这不是为了熟悉directive嘛~ -_-|||

AngularJS Directive - 开场小介绍(转)的更多相关文章

  1. Angularjs directive全面解读(1.4.5)

    说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...

  2. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  3. angularjs directive 实例 详解

    前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...

  4. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  5. angularjs directive (自定义标签解析)

    angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...

  6. angularJS之$watch的一个小介绍

    现在最近公司项目使用angularJS进行开发:以前也接触过但是不多,趁着现在熟悉回来. 如题,angular中$watch也是我们在开发的时候需要的各种监听: $watch接收3个参数,第一个是对象 ...

  7. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  8. jQuery和AngularJS的区别小分析

    最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs ...

  9. angularjs directive学习心得

    一些常见的错误 在angularjs里,创建directive时,directive的名称应该要使用驼峰式,例如myDirective,而在html里要调用它的时候,就不能用驼峰式了,可以用my-di ...

随机推荐

  1. .net中的特性

    本文来之:http://hi.baidu.com/sanlng/item/afa31eed0a383e0e570f1d3e 在一般的应用中,特性(Attribute,以称为属性)好像被使用的不是很多. ...

  2. js获取浏览器滚动条距离顶端的距离

    最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:    一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示 ...

  3. mysqlbinlog详解

    mysqlbinlog用于处理二进制日志文件的实用工具详解mysqlbinlog从二进制日志读取语句的工具.在二进制日志文件中包含的执行过的语句的日志可用来帮助从崩溃中恢复. binlog日志打开方法 ...

  4. oracle 自动添加序号列 排序

    select      HSL.sortno,                    HSL.B,                    HSL.A,                    row_n ...

  5. 本地开发时同时启动多个tomcat服务器

    1.环境变量中不要设置CATALINA_HOME: 2.分别修改安装目录下的conf子目录中的server.xml文件: a.修改http访问端口(默认为 8080端口),将8080修改为tomcat ...

  6. nyoj 素数环

    算法:搜索 描述 有一个整数n,把从1到n的数字无重复的排列成环,且使每相邻两个数(包括首尾)的和都为素数,称为素数环. 为了简便起见,我们规定每个素数环都从1开始.例如,下图就是6的一个素数环. 输 ...

  7. javascript的DOM操作(二)

    <html> <title>学习DOM</title> <a id="wen">文本</a> <input nam ...

  8. 运行一个Hadoop Job所需要指定的属性

    1.设置job的基础属性 Job job = new Job(); job.setJarByClass(***.class); job.setJobName("job name") ...

  9. Apache服务器安装配置(win版)

    登录http://httpd.apache.org/download.cgi 这个地址,找到2.4.10,如下图位置: 2 进入如下界面后,选择第一项ApacheHaus,这是个第三方下载平台,在它的 ...

  10. Bitly缩短网址服务 - Blog透视镜

    网站的网址过长或是含有非英文或数字符号,会导致在BBS或者微网志中分享给好友时,产生很多的不方便,Bitly是个缩短网址服务的网站,提供1个短网址转向指定到长网址,免费使用且提供统计报表,例如本篇文章 ...