指令(directive)是我们用来扩展浏览器能力的技术之一。在DOM编译期间,和html关联着的指令会被检测到,并且被执行。这使得指令可以为DOM指定行为,或者改变它的DOM结构。
1.在html中调用指令
指令遵循驼峰式命名,如ngModel(笔者在angular里试了试,这种不管用)。指令还可以通过使用指定符号转化成链式风格的名称来调用,特定符号包括:":","-","_"。还可以选择给指令加上前缀,比如"x-","data-"来让它符合html的验证规则。下面是可以用的指令名称例子:
ng:mode,ng-model,ng_model,x-ng-model,data-ng-model(这些可以用)。
指令可以作为元素名,属性名,类名,或者注释。下面是一些等效调用myDir指令的例子:
<span my-dir="exp"></span> <span class="my-dir: exp;"></span> <my-dir></my-dir> <!-- directive: my-dir exp -->
2.字符串替换式
在编译期间,编译器会用$interpolate服务去检查文本中是否嵌入里表达式。这些表达式会被注册为watches(监视器),并且作为$disgest循环中的一部分,它会自动更新。下面是一个例子:
<img src="img/{{username}}.jpg">Hello {{username}}!</img>
3.编译过程和指令匹配
html的编译分为三个阶段:
1).首先,通过浏览器的标准API,将html转换成DOM对象。这是很重要的一步,因为我们的模板必须可被解析(符合规范)的html。跟大多数模板系统做对比,它们一般是基于字符串的,而angular是基于DOM元素的。
2).对DOM的编译是通过$compile()方法完成的。这个方法会遍历DOM,并对指令进行匹配。如果匹配成功,那么将与对应的DOM一起,加入到指令列表中。一旦所有的指令都被确定里,会按照优先级被排列,并且他们的compile方法会被调用。指令的$compile()函数都能修改DOM结构,并且要负责生成一个链接(link)函数。$compile方法最后返回一个合并起来的链接函数,这些链接函数是每个指令的compile函数返回的链接函数的集合。
3).通过调用上一步所说的链接函数来将模板与作用域链接起来。这会轮流调用每个指令的链接函数,让每一个指令都能对DOM注册监听事件,和建立对作用域的监听。这样最后就形成里作用域的DOM的动态绑定。任何一个作用域的改变都会在DOM上体现出来。
下面用代码说明以上三步:
var $compile = ...; //angular编译器 var scope = ...; var html = '<div ng-bind='exp'></div>'; // 第1步: 将HTML转换成DOM对象(element) var template = angular.element(html); // 第2步: 编译这个 template var linkFn = $compile(template); // 第3步: 链接函数将 template和scope.链接起来 linkFn(scope);
相关推荐
本文主要讲解AngularJs directive的知识,这里整理了相关资料及示例代码,有兴趣的小伙伴可以参考下
主要为大家纤细介绍了AngularJS directive返回对象属性的相关内容,感兴趣的小伙伴们可以参考一下
主要介绍了详解angularJs中自定义directive的数据交互,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
NULL 博文链接:https://damoqiongqiu.iteye.com/blog/1917971
本篇文章给大家介绍在angularjs中自定义一个有关表格的directive,涉及到angularjs directive相关知识,对本文感兴趣的朋友一起学习吧
angularjs自定义指令directive,用做http地址校验和数字校验,仅供学习参考使用
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件,接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程,对angularjs相关知识感兴趣的朋友一起学习吧
本篇文章主要介绍了angularJS+requireJS实现controller及directive的按需加载示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Learn how to build an AngularJS directive Create extendable modules for plug-and-play usability Build apps that react in real-time to changes in your data model ☆ 出版信息:☆ [作者信息] Alex ...
下面小编就为大家带来一篇angularJS利用directive实现移动端自定义软键盘的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下
主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用,事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下
前端项目-zingchart-angularjs,A ZingChart AngularJS directive
本篇文章主要介绍了angularjs使用directive实现分页组件的示例,具有一定的参考价值,有兴趣的可以了解一下。
博客相关代码
前端项目-angular-mapboxgl-directive,An AngularJS directive for Mapbox GL
今天小编就为大家分享一篇angularJS自定义directive之带参方法传递详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
angular-tour, AngularJS为你的网站提供交互式浏览的指导 Angular AngularJS AngularJS AngularJS directive指导你浏览网站的指导。演示想看到它在行动中? 访问 http://daftmonk.github.io/angular-tour/展示你网