制作一个自定义的Directive

下面我们将制作我们的第一个自定义Directive。让我们对app.js和index.html进行一些修改：

  1. //app.js
  2. var App = angular.module("App", []);
  4. App.directive("people", function(){
  5.     return {
  6.         restrict: "E",
  7.         template : "<p>姓名:{{data.name}}</p><p>性别：{{data.sex}}</p>"
  8.     }
  9. });
  11. App.controller("FirstCtrl", function ($scope) {
  12.     $scope.data = {
  13.         name: "Harry",
  14.         sex : "男"
  15.     };
  16. });
  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="App">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{{"学习AngularJS 1.x"}}</title>
  6.     <link type="text/css" rel="stylesheet" href="css/style.css">
  7. </head>
  8. <body>
  9. <div ng-controller="FirstCtrl">
  10.     <!-- 注意这里只加入了一个people的标签 -->
  11.     <people></people>
  12. </div>
  14. <script type="text/javascript" src="components/angular/angular.js"></script>
  15. <script type="text/javascript" src="js/app.js"></script>
  16. </body>
  17. </html>

运行结果：

图5-1 Directive运行效果

代码分析

以下这段代码用于声明一个Directive：

  1. App.directive("people", function(){
  2.     return {
  3.         restrict : "E",
  4.         template : "<p>姓名:{{data.name}}</p><p>性别：{{data.sex}}</p>"
  5.     }
  6. });

我们将这段代码分拆开逐步讲解:

首先，声明一个Directive的基本结构如下，我们调用了directive()函数来告诉AngularJS加入一个新的Directive：

  1. App.directive();

调用这个函数，我们需要传入2个参数，第一个参数是Directive的命名（这里是people)，第二个参数是这个Directive的功能。

  1. App.directive("people", function(){});

在实例中，我们直接在第二个参数的函数中返回了一个对象:

  1. return {
  2.     restrict: "E",
  3.     template : "<p>姓名:{{data.name}}</p><p>性别：{{data.sex}}</p>"
  4. }

这个对象中有两个元素，restrict和template。

template

template相对比较容易理解，在运行网页时，HTML对应的标签，将被替换成对应的内容。我们这里看看替换后实际的HTML代码如何：

图5-2 Directive生效后的html代码

可以看到，AngularJS在<people></people>中间加入了template中的内容。

用替换而不是插入的方式应用Directive

如果在配置Directive时，加入replace : true（与restrict和template同级别），则可以让AngularJS用替换的模式应用Directive。

  1. App.directive("people", function(){
  2.     return {
  3.         restrict : "E",
  4.         replace : true,
  5.         template : "<p>姓名:{{data.name}}</p><p>性别：{{data.sex}}</p>"
  6.     }
  7. });

具体的效果，是会去除掉<people> </people>这对标签。

restrict

restrict是告诉AngularJS，这个Directive应该如何使用。

下面这个表格，总结了restrict可能有的值，具体的每种应用方案，我们将在下一节详解。

值 对应类型 使用方法
E element <people> </people>
A attribute <div people> </div>
C class <div class="people"> </div>
EAC - 以上三种都可使用

如果在restrict中设定了使用方法，而在HTML代码中却未按照对应的方法使用，那么代码将不会生效！