AngularJS Directive - 开场小介绍(转)
Directive其实就是让html变得更强大的一种方法。它可以根据需求对dom变形,或注入行为。
觉得它很神秘么,其实一点儿也不神秘,只要开始使用AngularJS了,就一定在使用着Directive,比如我们在html上写的那些ng-controller
,ng-model
,ng-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 |
|
貌似更简单。。。那前面说那么多干嘛?!
这不是为了熟悉directive嘛~ -_-|||
AngularJS Directive - 开场小介绍(转)的更多相关文章
- Angularjs directive全面解读(1.4.5)
说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- angularjs directive 实例 详解
前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- angularjs directive (自定义标签解析)
angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...
- angularJS之$watch的一个小介绍
现在最近公司项目使用angularJS进行开发:以前也接触过但是不多,趁着现在熟悉回来. 如题,angular中$watch也是我们在开发的时候需要的各种监听: $watch接收3个参数,第一个是对象 ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- jQuery和AngularJS的区别小分析
最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs ...
- angularjs directive学习心得
一些常见的错误 在angularjs里,创建directive时,directive的名称应该要使用驼峰式,例如myDirective,而在html里要调用它的时候,就不能用驼峰式了,可以用my-di ...
随机推荐
- JS中的for和for in循环
1.for循环通常用来遍历数组或类数组对象 模式1:长度缓存 for(var i=0,max=arr.length;i<max;i++){ //your code } 模式2:逐减,与零比较比与 ...
- C# Serializable学习
先上代码,感觉这个功能很给力啊. class Program { static void Main(string[] args) { //下面代码将对象Person进行序列化并存储到一个文件中 Per ...
- 洛谷 P1241 括号序列
P1241 括号序列 题目描述 定义如下规则序列(字符串): 1.空序列是规则序列: 2.如果S是规则序列,那么(S)和[S]也是规则序列: 3.如果A和B都是规则序列,那么AB也是规则序列. 例如, ...
- mysql 日期时间运算函数(转)
DAYOFWEEK(date) 返回日期date是星期几(1=星期天,2=星期一,……7=星期六,ODBC标准)mysql> select DAYOFWEEK('1998-02-03'); ...
- WordPress插件制作教程(三): 添加菜单的方法
上一篇编写了一个简单的插件,让大家对插件的简单制作有个了解,这一篇我们在更深一步,当我们激活插件后后台会显示菜单出来,然后通过单击菜单显示自己定义好的信息.激活之后会在WordPress后台显示一个菜 ...
- Hdu1096
#include <stdio.h> int main() { int T,n; ; while(scanf("%d",&T)!=EOF){ while(sca ...
- 异步编程设计模式Demo - AsyncComponentSample
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...
- javax.net.ssl.SSLException: java.lang.UnsupportedOperationException
Loading KeyStore C:\Tool\jdk1.7.0_71\jre\lib\security\jssecacerts... Opening connection to www.googl ...
- Oracle查看表空间及修改数据文件大小
Oracle查看表空间及修改数据文件大小 第一步:查看所有表空间及表空间大小: select tablespace_name ,sum(bytes) / 1024 / 1024 as MB from ...
- XJOI网上同步训练DAY1 T2
思路:似曾相识?...见http://www.cnblogs.com/qzqzgfy/p/5266874.html 一看时限还是4s!,于是就开开心心地打了70%的分,就是用容斥原理,就可以n^3解决 ...