棱角分明 射流研究…中的指令引用模板与指令当做属性详解

一、引用模板

对于指令，可以把它简单的理解成在特定数字正射影像图元素上运行的函数，指令可以扩展这个元素的功能。

指令要生效，那么超文本标记语言头里面要

html lang='en' ng-app='app '制定ng-app的值和定义指令的组件名字一致：

angular.module('app '，[])指令的完整参数：

angular.module('myApp '，[]).指令(“myDirective”，函数(){ return { restrict : String，priority: Number，terminal: Boolean，template: String或模板功能：功能(远程、远程).}，templateUrl:字符串，replace:布尔值或字符串，范围：布尔值或对象，transclude:布尔值，控制器：字符串或函数(作用域，元素，属性，transclude，其他注射剂){ 0.}，controllerAs: String，require: String，link: function(作用域、元素、iAttrs){ 0.}，compile: //返回一个对象或连接函数，如下所示：函数(远程、远程、远程){返回{ pre:函数(范围、元素、iAttrs、控制器).}，邮政：函数（作用域、iElement、iAttrs、控制器){ 0.} }返回函数postLink(.) { .} } };});指令可以使用的方式：

限制[字符串]

限制是一个可选的参数。用于指定该指令在数字正射影像图中以何种形式被声明。默认值是一个，即以属性的形式来进行声明。

可选值如下：

(e)元素)我的指令/我的指令a(属性，默认值)div我的-指令='expression'/div C(类名)div class=' my-directive :表达式；'/div M(注释)-directive : my-direction表达式-替换[bool]

替换是一个可选参数，如果设置了这个参数，值必须为没错，因为默认值为假的。默认值意味着模板会被当作子元素插入到调用此指令的元素内部，

例如上面的示例默认值情况下，生成的超文本标记语言代码如下：

my-directive value=' http://www。百度。com“text=”百度http://。百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '百度/a/我的-指令如果设置替换=真

http://。百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' value=' http://www .百度。com“text=”百度'百度/a据我观察，这种效果只有设置限制='E '的情况下，才会表现出实际效果。

模板[字符串或函数]

模板参数是可选的，必须被设置为以下两种形式之一：

一段超文本标记语言文本；

一个可以接受两个参数的函数，参数为远程和塔特尔斯，并返回一个代表模板的字符串远程。和tAttrs中的t代表模板，是相对于情况的。

不管是返回超文本标记语言文本还是函数，都是最后替换一个html，和替换属性搭配使用的，先给出一个完整的index.heml指令。js，以这个为例子来说明：

！doctype HTML HTML lang=' en ' ng-app=' app ' head meta charset=' utf-8 ' title my HTML File/title link rel='样式表href=' bootstrap/CSS/bootstrap。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '脚本src=' http 3360 anglarjs/angular。js '/script script src=' http 3360 my diractive。js '/script/head my-指令然后js:

angular.module('app '，[]).指令(' myDirective '，function(){ return { restrict : ' E '，template : ' a href=' http://www。百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '百度/a ' }；})最后的运行效果以及萤火虫查看到的效果：

如果添加指令的替换属性为是的，那么就不会有这个directvie指令部分了：

上面就是差别。

再说说指令定义里面模板参数是函数的情况，我们改写超文本标记语言以及js:

！doctype HTML HTML lang=' en ' ng-app=' app ' head meta charset=' utf-8 ' title my HTML File/title link rel='样式表href=' bootstrap/CSS/bootstrap。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '脚本src=' http 3360 anglarjs/angular。js '/script script src=' http 3360 my diractive。js '/script/head my-指令百度/我的-指令/body/htmljs文件：angular.module('app '，[]).指令(“myDirective”，function(){ return { restrict : ' EAC '，template: function (elem，attr){ return ' a href=' attr。值' ' ' attr。文本'/a '；} };})指令定义的模板是一个函数对象，返回一个超文本标记语言的字符串，那么他的elem和属性就是分别代表这个指令和他在index.html里面的属性：

属性值和attr.text分别对应：

my-directive value=' http://www。百度。com“text=”百度/我的-指令里面的价值和文本。

不替换的情况：

二、指令当做属性

上面说过：

angular.module('myApp '，[]).指令(“myDirective”，function(){ return { restrict : String，后面省略指令限制有四种用法，默认是一个，也就是当做属性，

(e)元素)我的指令/我的指令a(属性，默认值)div我的-指令='expression'/div C(类名)div class=' my-directive :表达式；'/div M(注释)-directive : my-direction表达式-然后如果一个指令直接返回一个函数的时候，其实返回的一个环函数，比如：

angular.module('time '，[]).指令(' xxx '，函数(){ 0返回函数（作用域，元素，属性)}这个是表示直接链接。

当指令做属性的时候，有两重含义：

1.在一个超文本标记语言元素里面制定为属性

2.js定义的指令名。

看一个例子：

JS:

angular.module('time '，[]).控制器(' Ctrl2 '，函数($ scope){ $ scope。格式=' M/d/YY h :mm 3360s a '；}) //注册“我的当前时间”指令工厂方法。//我们注入$超时和日期过滤器服务，因为工厂方法是直接投资.指令(“我的当前时间”，函数($timeout，dateFilter) { //返回指令链接函数。(不需要编译函数)返回函数（作用域、元素、attr){ var格式，//日期格式timeoutId//timeoutId，这样我们就可以取消时间更新//用来更新用户界面函数updateTime(){元素。文本(日期过滤器(新日期())、格式))；} //观察表情，变化时更新用户界面.范围$watch(attrs.myCurrentTime，function(value){ format=value；updateTime()；});//在一秒钟内计划更新函数updatelate(){//保存用于取消timeoutId的timeoutId=$timeout(函数(){ updateTime()；//更新DOM updatelate()；//安排另一次更新},1000);} //监听数字正射影像图破坏（移除)事件，并取消下一次用户界面更新//,以防止数字正射影像图元素被移除后的更新时间element.bind('$destroy '，function(){ $ time out。取消(timeoutId)；});updateLaTer()；//启动用户界面更新流程。} });然后index.html:

！doctype HTML HTML lang=' en ' ng-app=' time ' head meta charset=' utf-8 ' title my HTML File/title link rel='样式表href=' bootstrap/CSS/bootstrap。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '脚本src=' http 3360 anglarjs/angular。js '/script script src=' http 3360 my diractive。js '/脚本/头dy div-ng注意：ng-app='time '一定要指明是时间。否则无法关联起来。

分析如下：

为span设置一个属性，在范围内绑定到格式span my-current-time=' format '/span，在范围内绑定到格式输入ng-model='format '，并定义控制器- Ctrl2。然后引入范围，定义变量格式，定义指令myCurrentTime，然后对应html中的my-current-time='format '，用破折号连接，指令就是驼峰式myCurrentTime链接函数的三个参数。以及attr的使用：返回函数(作用域、元素、attr){作用域。$ watch (attrs。myCurrentTime，function(value){可以看出，我当前的时间不仅是指令名，也是这个span元素中的属性名，它的值就是format的实值。用萤火虫看：

作为属性，当replace起作用时，指令不会被替换或插入，即属性，其背后的日期值实际上是updateTime()函数直接写入elem.text的效果。此处指令作为属性的功能是扩展当前元素的功能。摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。