AngularJS-Directive详解 - 01

发布时间：2020-12-17 09:38:48 所属栏目：安全来源：网络整理

导读：directive顾名思义，是angular中的一个指令。那么什么是指令那？指令是DOM元素（例如属性，元素名称，注释或CSS类）的标记，它们告诉AngularJS的HTML编译器（$ compile）将指定的行为附加到该DOM元素（例如通过事件监听器），甚至可以转换DOM元素及其子元

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

(function(angular){ angular.module('DirectiveTestApp',function(){ return { templateUrl:function(elem,attr){ return 'views/' + attr.type + '.html'; } } }); })(angular);

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

(function(angular){ angular.module('DirectiveTestApp',function(){ return { restrict:"E",templateUrl:function(elem,attr){ return 'views/customer.html'; } } }); })(angular);

customer.html

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!