凡客建站_怎么建设网站_建网_企业网站怎么建立_网站建设官网
当前位置:建站首页 > 新闻资讯 > 网站设计 >

php小程序开发_Angular.JS中的指令引用template与指令

发表日期:2021-01-12 12:29文章编辑:jianzhan浏览次数: 标签:    

Angular.JS中的指令引用template与指令当做属性详解       这篇文章主要介绍了Angular.JS中的指令引用template与指令当做属性的相关资料,文中介绍的非常详细,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。

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

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

 html lang="en" ng-app="app" 

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

angular.module('app',[])

指令的完整参数:

angular.module('myApp', [])
.directive('myDirective', function() {
 return {
 restrict: String,
 priority: Number,
 terminal: Boolean,
 template: String or Template Function:
 function(tElement, tAttrs) {...},
 templateUrl: String,
 replace: Boolean or String,
 scope: Boolean or Object,
 transclude: Boolean,
 controller: String or
 function(scope, element, attrs, transclude, otherInjectables) { ... },
 controllerAs: String,
 require: String,
 link: function(scope, iElement, iAttrs) { ... },
 compile: // 返回一个对象或连接函数,如下所示: function(tElement, tAttrs, transclude) {
 return {
 pre: function(scope, iElement, iAttrs, controller) { ... },
 post: function(scope, iElement, iAttrs, controller) { ... }
 return function postLink(...) { ... }
 });

指令可以使用的方式:

restrict[string]

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

可选值如下:

E(元素) my-directive /my-directive A(属性,默认值) div my-directive="expression" /div C(类名) div /div M(注释) --directive:my-directive expression--

replace[bool]

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

例如上面的示例默认值情况下,生成的html代码如下:

 my-directive value="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" 百度 /a /my-directive 

如果设置replace=true

 a href="/" text="百度" 百度 /a 

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

template[string or function]

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

 一段HTML文本;

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

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

 !doctype html 
 html lang="en" ng-app="app" 
 head 
 meta charset="utf-8" 
 title My HTML File /title 
 link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 script src="angularjs/angular.js" /script 
 script src="mydirective.js" /script 
 /head 
 body 
 my-directive /my-directive 
 /body 
 /html 

然后js:

 angular.module('app',[])
 .directive('myDirective', function () {
 return {
 restrict: 'E',
 template: ' a href="a '
 })

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

ie指令部分了:

上面就是差别。

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

 !doctype html 
 html lang="en" ng-app="app" 
 head 
 meta charset="utf-8" 
 title My HTML File /title 
 link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 script src="angularjs/angular.js" /script 
 script src="mydirective.js" /script 
 /head 
 body 
 my-directive value="my-directive 
 /body 
 /html 
js文件:
angular.module('app',[])
 .directive('myDirective', function () {
 return {
 restrict: 'EAC',
 template: function (elem, attr) {
 return " a href='" + attr.value + "' " + attr.text + " /a 
 })
<里面的属性:

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

 my-directive value="my-directive 

里面的value和text。

不replace的情况:

二、指令当做属性

上面说过:

angular.module('myApp', []) 
 .directive('myDirective', function() { 
 return { 
 restrict: String, 后面省略

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

E(元素) my-directive /my-directive A(属性,默认值) div my-directive="expression" /div C(类名) div /div M(注释) --directive:my-directive expression--

// Register the 'myCurrentTime' directive factory method. // We inject $timeout and dateFilter service since the factory method is DI. .directive('myCurrentTime', function($timeout, dateFilter) { // return the directive link function. (compile function not needed) return function(scope, element, attrs) { var format, // date format timeoutId; // timeoutId, so that we can cancel the time updates // 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. }); <:

 !doctype html 
 html lang="en" ng-app="time" 
 head 
 meta charset="utf-8" 
 title My HTML File /title 
 link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 script src="angularjs/angular.js" /script 
 script src="mydirective.js" /script 
 /head 
 body 
 div ng-controller="Ctrl2" 
 Date format:
 input ng-model="format" 
 hr/ 
 Current time is: span my-current-time="format" /span 
 /div 
 /body 
 /html 

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

分析如下:

给span制定了一个属性,绑定到了scope里面的format span my-current-time="format" /span 定义了输入框,绑定了scope里面的format input ng-model="format" 定义了controller -- Ctrl2, 然后引入了scope,定义了变量format 定义了指令myCurrentTime , 然后就是和html里面的my-current-time="format"对应,html里面用破折号连起来,指令就是驼峰样子的myCurrentTime(首字母小写) link函数的三个参数,以及attrs的使用:
return function(scope, element, attrs) {
scope.$watch(attrs.myCurrentTime, function(value) {

可看到,myCurrentTime既是指令名字,然后在这个span元素里面又是属性名,他的值是format的真实值。 用firebug看到: 指令当成属性,不会有replace起作用的时候,不会被替换也不会插入,就是一个属性,后面的日期值,其实是updateTime()函数直接写elem.text的效果。 此处指令当做属性的作用就是扩展当前元素的功能。

总结

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


相关新闻