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. JS中的for和for in循环

    1.for循环通常用来遍历数组或类数组对象 模式1:长度缓存 for(var i=0,max=arr.length;i<max;i++){ //your code } 模式2:逐减,与零比较比与 ...

  2. C# Serializable学习

    先上代码,感觉这个功能很给力啊. class Program { static void Main(string[] args) { //下面代码将对象Person进行序列化并存储到一个文件中 Per ...

  3. 洛谷 P1241 括号序列

    P1241 括号序列 题目描述 定义如下规则序列(字符串): 1.空序列是规则序列: 2.如果S是规则序列,那么(S)和[S]也是规则序列: 3.如果A和B都是规则序列,那么AB也是规则序列. 例如, ...

  4. mysql 日期时间运算函数(转)

      DAYOFWEEK(date) 返回日期date是星期几(1=星期天,2=星期一,……7=星期六,ODBC标准)mysql> select DAYOFWEEK('1998-02-03'); ...

  5. WordPress插件制作教程(三): 添加菜单的方法

    上一篇编写了一个简单的插件,让大家对插件的简单制作有个了解,这一篇我们在更深一步,当我们激活插件后后台会显示菜单出来,然后通过单击菜单显示自己定义好的信息.激活之后会在WordPress后台显示一个菜 ...

  6. Hdu1096

    #include <stdio.h> int main() { int T,n; ; while(scanf("%d",&T)!=EOF){ while(sca ...

  7. 异步编程设计模式Demo - AsyncComponentSample

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...

  8. javax.net.ssl.SSLException: java.lang.UnsupportedOperationException

    Loading KeyStore C:\Tool\jdk1.7.0_71\jre\lib\security\jssecacerts... Opening connection to www.googl ...

  9. Oracle查看表空间及修改数据文件大小

    Oracle查看表空间及修改数据文件大小 第一步:查看所有表空间及表空间大小: select tablespace_name ,sum(bytes) / 1024 / 1024 as MB from ...

  10. XJOI网上同步训练DAY1 T2

    思路:似曾相识?...见http://www.cnblogs.com/qzqzgfy/p/5266874.html 一看时限还是4s!,于是就开开心心地打了70%的分,就是用容斥原理,就可以n^3解决 ...