Angular.JS中的指令引用template与指令当做属性详解

一、引用template

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

指令要生效，那么html头里面要

制定ng-app的值和定义指令的module名字一致：

指令的完整参数：

函数，如下所示： function(tElement,tAttrs,transclude) { return { pre: function(scope,iAttrs,controller) { ... },post: function(scope,controller) { ... } } return function postLink(...) { ... } } }; });

指令可以使用的方式：

restrict[string]

restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。

可选值如下：

E（元素）
A（属性，默认值）
C（类名）
M（注释）<--directive:my-directive expression-->

replace[bool]

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

例如上面的示例默认值情况下，生成的HTML代码如下：

百度">百度

如果设置replace=true

nofollow" rel="external nofollow" rel="external nofollow" value="http://www.baidu.com" text="百度">百度

据我观察，这种效果只有设置restrict="E"的情况下，才会表现出实际效果。

template[string or function]

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

一段HTML文本；

一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。

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

<Meta charset="utf-8"> My HTML File

然后js：

百度' }; })

最后的运行效果以及firebug查看到的效果：

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

上面就是差别。

再说说指令定义里面模板参数是函数的情况，我们改写html以及js：

<Meta charset="utf-8"> My HTML File

百度">

js文件：
angular.module('app',function () {
return {
restrict: 'EAC',template: function (elem,attr) {
return "" + attr.text + "";
}
};
})

指令定义的template是一个函数对象，返回一个html的字符串，那么他的elem和attr就是分别代表这个指令和他在index.html里面的属性：

attr.value和attr.text分别对应：

百度">

里面的value和text。

不replace的情况：

二、指令当做属性

上面说过：

指令restrict有四种用法，默认是A，也就是当做属性，

E（元素）
A（属性，默认值）
C（类名）
M（注释）<--directive:my-directive expression-->

然后如果一个指令直接返回一个函数的时候，其实返回的一个link函数，比如：

这个是表示直接link。

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

1.在一个html元素里面制定为属性

2.js定义的指令名。

看一个例子：

JS：

// used to update the UI
function updateTime() {
element.text(dateFilter(new Date(),format));
}

// watch the expression,and update the UI on change.
scope.$watch(attrs.myCurrentTime,function(value) {
format = value;
updateTime();
});

// schedule update in one second
function updateLater() {
// save the timeoutId for canceling
timeoutId = $timeout(function() {
updateTime(); // update DOM
updateLater(); // schedule another update
},1000);
}

// listen on DOM destroy (removal) event,and cancel the next UI update
// to prevent updating time ofter the DOM element was removed.
element.bind('$destroy',function() {
$timeout.cancel(timeoutId);
});

updateLater(); // kick off the UI update process.
}
});

然后index.html:

<Meta charset="utf-8"> My HTML File

Current time is:

注意：ng-app="time"一定要指明是time。否则无法关联起来。

分析如下：

给span制定了一个属性，绑定到了scope里面的format
定义了输入框，绑定了scope里面的format


  定义了controller -- Ctrl2， 然后引入了scope，定义了变量format
  定义了指令myCurrentTime ， 然后就是和html里面的my-current-time="format"对应，html里面用破折号连起来，指令就是驼峰样子的myCurrentTime（首字母小写）
  link函数的三个参数，以及attrs的使用：
  
  
  
  可看到，myCurrentTime既是指令名字，然后在这个span元素里面又是属性名，他的值是format的真实值。
  用firebug看到：
  指令当成属性，不会有replace起作用的时候，不会被替换也不会插入，就是一个属性，后面的日期值，其实是updateTime()函数直接写elem.text的效果。
  此处指令当做属性的作用就是扩展当前元素的功能。


总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
angularangularangularjsangular指令templatetemplatetemplatetemplate

Angular.JS中的指令引用template与指令当做属性详解

一、引用template

二、指令当做属性

分析如下：

总结

相关文章