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

一、引用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="https://www.baidu.com" text="百度"><a href="https://www.baidu.com" >百度</a></my-directive>

如果设置replace=true

<a href="https://www.baidu.com" value="https://www.baidu.com" 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 href="https://www.jb51.net/bootstrap/css/bootstrap.css" > <script src="https://www.jb51.net/angularjs/angular.js"></script> <script src="https://www.jb51.net/mydirective.js"></script> </head> <body> <my-directive></my-directive> </body> </html>

然后js:

angular.module('app',[]) .directive('myDirective', function () { return { restrict: 'E', template: '<a href="https://www.baidu.com" >百度</a>' }; })

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

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

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

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

上面就是差别。

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

<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <title>My HTML File</title> <link href="https://www.jb51.net/bootstrap/css/bootstrap.css" > <script src="https://www.jb51.net/angularjs/angular.js"></script> <script src="https://www.jb51.net/mydirective.js"></script> </head> <body> <my-directive value="https://www.baidu.com" text="百度"></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>"; } }; })

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

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

<my-directive value="https://www.baidu.com" text="百度"></my-directive>

里面的value和text。

不replace的情况:

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

二、指令当做属性

上面说过:

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-->

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

angular.module('time', []) .directive('xxx', function() { return function(scope, element, attrs) {

这个是表示直接link。

当指令做属性的时候,有两重含义:

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

2.js定义的指令名。

看一个例子:

JS:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwyjwd.html