AngularJS-Directive详解 - 01

2024-04-27 15:08:58

字体：大中小

来源：转载

供稿：网友

directive顾名思义，是angular中的一个指令。那么什么是指令那？

指令是DOM元素（例如属性，元素名称，注释或CSS类）的标记，它们告诉AngularJS的HTML编译器（$ compile）将指定的行为附加到该DOM元素（例如通过事件监听器），甚至可以转换DOM元素及其子元素。AngularJS附带了一组内置的这些指令，如ngBind，ngModel和ngClass。

因为在HTML中不区分大小写，因此我们通过小写形式引用DOM中的伪指令，通常使用DOM元素（例如ng-model）上的使用连字符分隔的属性。

接下来我们看一个简单的 directive事例

index.html

<!DOCTYPE html><html lang="en" ng-app="DirectiveTestApp"><head> <meta charset="UTF-8"> <title>Document</title></head><body ng-controller="MainCtrl as ctrl"> <div my-customer></div> <script src="js/angular.js"></script> <script src="js/index.js"></script></body></html>

index.js

(function(angular){ angular.module('DirectiveTestApp',[]) .controller('MainCtrl',function($scope){ $scope.customer = { name:'Sunday', address:"jinan" } }).directive('myCustomer',function(){ return { template : '<h1>name : {{customer.name}} , address: {{customer.address}}</h1>' } });})(angular);

我们在index.html中自定义了一个 my-customer 的属性，在js代码中我们对这个属性做了一个声明，即，为包含这个属性的元素添加这里写图片描述了 <h1>name : {{customer.name}} , address: {{customer.address}}</h1> 的模板。我们看一下当前代码在浏览器中的展示形式。大家可以看到在浏览器中的元素树中，包含 my-customer 的div元素添加上了我们在js代码中声明的模板。而在js中写html代码是一件特别蛋疼的事情，如果一直使用 template 会有特别多的不方便的地方，所以angular为我们提供了 templateUrl可以直接引入一个html文件，用于替代 template。

templateUrl是返回要加载并用于指令的HTML模板的URL的函数。 AngularJS将调用带有两个参数的templateUrl函数：指令被调用的元素，以及与该元素相关联的attr对象

这句话是什么意思那？大家看下使用 templateUrl之后的代码。

index.html

<!DOCTYPE html><html lang="en" ng-app="DirectiveTestApp"><head> <meta charset="UTF-8"> <title>Document</title></head><body ng-controller="MainCtrl as ctrl"> <div my-customer type="name"></div> <div my-customer type="address"></div> <script src="js/angular.js"></script> <script src="js/index.js"></script></body></html>

index.js

name.html

<h2>Name: {{customer.name}}</h2>

address.html

<h2>Address: {{customer.address}}</h2>

我们在设置这个drective的时候，为它设置了一个额外的属性，type=”” , 在为其设置 templateUrl的时候可以获取到两个参数，element , attr 即：指令被调用的元素，以及与该元素相关联的attr对象，返回模板的路径。

restrict属性： - A：匹配属性名称 - E：匹配元素名称 - C：匹配类名 - M：匹配注释

我们可以使用 “AE”的组合使其同时支持属性名称和元素名称。

简单的看一下代码： index.html

<!DOCTYPE html><html lang="en" ng-app="DirectiveTestApp"><head> <meta charset="UTF-8"> <title>Document</title></head><body ng-controller="MainCtrl as ctrl"> <my-customer></my-customer> <script src="js/angular.js"></script> <script src="js/index.js"></script></body></html>

index.js

customer.html

<h2>Name: {{customer.name}} Address: {{customer.address}}</h2>

这一章就先说到这里，下一章为大家讲解directive更深层次的用法。

上一篇：监听keyup 和keydown 事件

下一篇：欢迎使用CSDN-markdown编辑器