文档章节

AngularJS 指令解析(二)

前端老手
 前端老手
发布于 10/10 19:00
字数 1239
阅读 47
收藏 0

AngularJS 指令解析(二)


第一篇我们讲过了作用域(scope)这块内容,现在我们进入正题,讲AngularJS的指令。

什么是指令?

这里我们引用官方的一句话:
Custom directives to access the DOM: In AngularJS, the only place where an application should access the DOM is within directives. This is important because artifacts that access the DOM are hard to test. If you need to access the DOM directly you should write a custom directive for this. The directives guide explains how to do this.

翻译过来的,总结起来的意思就是应用程序能访问DOM的唯一通道就是指令。这就是这句话的意思,后面几句话是解释,就是说一方面这个东西难测试,另外你想这么做的话还可以自己写指令去直接访问DOM。

在我看来,AngularJS的指令相当于小型的组件,一方面你可以在指令里面直接操作DOM,另一方面指令模版可以使得代码控制的逻辑层面上可以结构分明,降低scope控制上的耦合度。比如一个简单的伸缩隐藏控制,一般会放到一个界面的作用域里面去统一控制,但是如果后续有其他同样的表单也有这样的处理,那就得每个模块各自写一套了,控制上也不保证能保持一致。相比之下,我们可以将这样类似的行为放到一个组件里面,由组件去自发的控制这个伸缩隐藏,反而可以避免很多不必要的事情。

指令属性

restrict

这个属性定义的是指令的使用方法,分别有4种,默认是EA

  • E 指定指令作为元素使用
  • A 指定指令作为属性使用
  • C 指定指令作为类名使用
  • M 指定指令作为注释使用

个人推荐的写法是,指令用A或者C,组件用E,这样区分起来会很清楚。
而指令用A还是用C取决于指令自身的使用范围,比如有的指令只是控制一些显示隐藏什么的,那A绰绰有余了,如果还有额外的全局样式控制,那还是C靠谱些,这样代码还工整些。

scope

这个属性定义的是指令的作用范围,分别有3种,默认是false

  • false 与父作用域共用一个作用域
  • true 继承父作用域,创建一个子作用域
  • {} 独立作用域,与父作用域无关联

个人的选择依据在于有木有复杂的表单交互控制,若有,则选择false可以减少一些交互上的问题,反之选true或者是独立作用域则是需要额外考量的,组件上则独立作用域会好一点,而子作用域的设立可以通过scope通信解决一些比较小的通信问题,同时也能保证作用域在一定程度上的独立性。

而独立作用域下有3种方式的通信

  • @ 属性侦测
  • & 事件继承
  • = 双向绑定(除了ngModel之外)

一般是双向绑定要好一些,特殊表单可以用双向绑定,但是数据输入这块还是需要transclue的支持,而且直接跟父作用域交互会更好。

template or templateUrl

这个属性很简单明了,一个是指令模版字符串形式,另一个是指令模版地址形式

replace

这个属性表明要不要做替换插入,false是作为子元素插入,反之是作为替换插入

transclue

这个可以类比vue的slot,内联插入标签内部的模版到ng-tranclude指令的标签内

controller

这个属性表明指令控制器可以创建scope,scope在link函数里面是共享的,作为link函数的第一参数,这里可以写一些需要绑定的事件,或者是数据处理

link

这个属性表示指令编译完成之后链接到DOM上的一些回调操作,pre表示链接之前,post表示链接之后,参数(作用域,模版元素,属性列表,ngModel控制器)

  • pre-link
  • post-link

这里可以做一些数据监控上的处理,比如属性监听,而且对DOM操作比较多的事件可以放到这里去做而不是在controller里面

compile

这个属性指的是自定义的编译方式,还有一个是参数绑定上的处理,比较危险,一般不建议操作的,参数(模版元素,属性列表)


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文转载自:https://www.mk2048.com/blog/blog.php?id=hh10kaj1bcjb

前端老手
粉丝 10
博文 618
码字总数 0
作品 0
卢湾
技术主管
私信 提问
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名
2011/01/20
356.8K
46
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
189
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
学习 AngularJS (一)

进一步看入 kityminder-editor 部分了, 打开示例文件 index.html, 开头就是引入三个著名 js 开源库: jQuery.js, bootstrap.js, angular.js 这意味着我又得学习了解这些库都是干什么的了. 略知...

刘军兴
2015/12/04
235
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js—String的一些方法

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var str="Hello boy" /** * 在底......

zhengzhixiang
6分钟前
2
0
vSphere ESXi 主机上的3种VLAN设置

VLAN - Virtual Local Area Network,虚拟局域网,能便捷地组建一个网络分组,并能提供诸多好处。VMware vSphere ESXi主机上,也可以在个层次上通过设置VLAN标签地形式来组建VLAN。从划分的层...

大别阿郎
28分钟前
3
0
elasticsearch 6.x的基本dsl语句

本文使用的谷歌浏览器插件sense,链接如下sense插件(兼容es6.x版本) 查看集群状态 http://106.12.27.130:9200/_cat/health?v 绿色-一切都很好(集群功能齐全) 黄色——所有的数据都是可用...

长恭
42分钟前
11
0
移动端的弹窗滚动禁止body滚动

本文转载于:专业的前端网站➼移动端的弹窗滚动禁止body滚动 前言 最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到body滚动,而阻止默认行为是不行的,这样两个...

前端老手
今天
17
0
设计模式 建造者模式和模板方法模式扩展篇

建造者模式和模板方法模式扩展篇 UML 与抽象工厂模式比较 本模式可以看出与抽象工厂非常类似,都是产生不同的产品,怎么区分这两种设计的使用场景呢 - 建造者模式关注的是基本方法的调...

木本本
今天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部