博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS Directive - 开场小介绍(转)
阅读量:5213 次
发布时间:2019-06-14

本文共 1863 字,大约阅读时间需要 6 分钟。

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

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

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

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

 

 

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

之前的html

1 

 

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

 

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的版本

12
//注意这里是单引号套着双引号,外面一层引号是表示标签属性的值,里面一层引号表示直接给的模板名称,因为这里也可以通过表达式的返回值来取

貌似更简单。。。那前面说那么多干嘛?!

这不是为了熟悉directive嘛~ -_-|||

转载于:https://www.cnblogs.com/freefish12/p/5798487.html

你可能感兴趣的文章
高级滤波
查看>>
使用arcpy添加grb2数据到镶嵌数据集中
查看>>
[转载] MySQL的四种事务隔离级别
查看>>
QT文件读写
查看>>
C语言小项目-火车票订票系统
查看>>
15.210控制台故障分析(解决问题的思路)
查看>>
BS调用本地应用程序的步骤
查看>>
常用到的多种锁(随时可能修改)
查看>>
用UL标签+CSS实现的柱状图
查看>>
mfc Edit控件属性
查看>>
Linq使用Join/在Razor中两次反射取属性值
查看>>
[Linux]PHP-FPM与NGINX的两种通讯方式
查看>>
Java实现二分查找
查看>>
优秀员工一定要升职吗
查看>>
[LintCode] 462 Total Occurrence of Target
查看>>
springboot---redis缓存的使用
查看>>
架构图-模型
查看>>
sql常见面试题
查看>>
jQuery总结第一天
查看>>
Java -- Swing 组件使用
查看>>