让Directive支持传入数据

在第一节中，我们使用的Directive，可以直接获取并显示控制器中的数据（人的名称和性别）。但是，如果我们有多个人的信息需要显示怎么处理？这个问题其实非常常见，因为Directive通常是将需要在界面中重复使用的部分抽象出来，便于一次修改，多处地方生效（如博客的评论的列表显示）。

如果我们按照现在的代码结构（详见第一节），期望放置不同的人的信息，只能采取重复多个控制器的方式，可能的代码如下：

  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.     <!-- 第一个人的信息 -->
  11.     <people></people>
  12. </div>
  14. <div ng-controller="SecondCtrl">
  15.     <!-- 第二个人的信息 -->
  16.     <people></people>
  17. </div>
  20. <script type="text/javascript" src="components/angular/angular.js"></script>
  21. <script type="text/javascript" src="js/app.js"></script>
  22. </body>
  23. </html>

这样做，无法实现动态化的列表，是无法实现我们期望的功能的。我们理想中的情况应该是什么样子呢？当然是能够并列放置这些Directive，通过传入不同的数据来让Directive展示不同的内容。

  1. <div ng-controller="FirstCtrl">
  2.     <!-- 第一个人的信息 -->
  3.     <div people='peopleOneInfo'></div>
  5.     <!-- 第二个人的信息 -->
  6.     <div people='peopleTwoInfo'></div>
  7. </div>

这样的功能，可以通过配置Directive的scope定义实现。

Directive的scope

在之前学习控制器ng-controller的使用过程中，我们使用了$scope功能。$scope用于提供对接HTML和JavaScript对应模块的功能。

而Directive在默认情况下，是没有自动绑定一个$scope的。也就是说，在默认情况下，Directive无法在JavaScript中接收传入的数据（因为缺少一个存储信息的载体），形成我们期望的效果。但是，Directive提供了非常简单的定义一个scope的功能：

  1. App.directive("people", function(){
  2.     return {
  3.         restrict: "A",
  4.         scope:{
  5.             info: "="
  6.         },
  7.         template : "<p>姓名:{{info.name}}</p><p>性别：{{info.sex}}</p>"
  8.     }
  9. });
  11. App.controller("FirstCtrl", function ($scope) {
  12.     $scope.harry = {
  13.         name: "Harry",
  14.         sex : "男"
  15.     };
  16. });

注意，这里我将restrict从”E”(element元素)改变成为了”A”(attribute 属性)，这样它的使用方法有了一些变化：

  1. <div ng-controller="FirstCtrl">
  2.     <div people info="harry"></div>
  3. </div>

在HTML代码里，我们为div元素配置了一个people的属性和一个info属性；并将FirstCtrl的$scope.harry传入给了info。最终的显示效果如下：

图5-5 传入数据的Directive

scope中的配置

可以看到，在上方的JavaSciprt文件中，我们对scope的定义使用了如下结构：

  1. scope:{
  2.     info: "="
  3. }

首先，scope:{}是告诉这个Directive它需要自己存储信息（类似于建立一个基于这个Directive的$scope)。

info: "=" 这段配置，告诉Directive从HTML标签中，获取名为info的属性，并将它的值存储在scope.info中。这样，我们就达到了存储数据的效果。

在一个ng-ontroller中放入多个相同的Directive

下面，我们在FirstCtrl中增加几个人的数据，并将它们通过Directive显示出来：

  1. //在FirstCtrl中加入如下代码
  2. $scope.anotherPerson = {
  3.     name : "张三",
  4.     sex : "男"
  5. };
  1. <div ng-controller="FirstCtrl">
  2.     <div people info="harry"></div>
  3.     <div people info="anotherPerson"></div>
  4. </div>

运行效果如下：

图5-6 在一个控制器中多个Directive

通过ng-repeat和directive一起显示数据

知道了如何传入数据，那么我们就可以将Directive的使用和ng-repeat结合起来，实现列表显示数据的效果。

我们先将FirstCtrl的数据变化为一个array：

  1. App.controller("FirstCtrl", function ($scope) {
  2.     $scope.people = [
  3.         {
  4.             name: "Harry",
  5.             sex: "男"
  6.         },
  7.         {
  8.             name: "张三",
  9.             sex: "男"
  10.         }
  11.     ];
  12. });
  1. <div ng-controller="FirstCtrl">
  2.     <span ng-repeat="person in peopleList">
  3.         <div people info="person"></div>
  4.     </span>
  5. </div>

实现的效果与上一张图片一样。（具体的页面HTML代码会有差异，请您自行测试查看）

在Directive中修改控制器中的数据

以上我们看到的示例只是将数据显示了出来，如果我们期望在Directive中修改这些数据如何处理呢？

其实很简单，将template中原先显示的数据的部分，替换为input即可。

  1. App.directive("people", function () {
  2.     return {
  3.         restrict: "A",
  4.         scope: {
  5.             info: "="
  6.         },
  7.         template: "<input type='text' ng-model='info.name'><p>性别：{{info.sex}}</p>"
  8.     }
  9. });
  1. <div ng-controller="FirstCtrl">
  2.     {{ peopleList | json}}
  3.     <span ng-repeat="person in peopleList">
  4.         <div people info="person"></div>
  5.     </span>
  6. </div>

刷新界面后，我们可以在输入框中尝试修改。效果如下：

图5-7 在Directive中修改数据

以只读的方式传入数据

除了以等号=直接传入对象之外，Directive也支持直接传入文本，使用@符号。

  1. App.directive("people", function () {
  2.     return {
  3.         restrict: "A",
  4.         scope: {
  5.             name: "@",
  6.             sex : "@"
  7.         },
  8.         template: "<input type='text' ng-model='name'><p>性别：{{sex}}</p>"
  9.     }
  10. });
  1. <div ng-controller="FirstCtrl">
  2.     {{ peopleList | json}}
  3.     <span ng-repeat="person in peopleList">
  4.         <!-- 注意此处的数据传入方法 -->
  5.         <div people name="{{person.name}}" sex="{{person.sex}}"></div>
  6.     </span>
  7. </div>

运行效果：

图5-8 在Directive中传入字符串

可以看到，我们在Directive中传入的数据进行的数据修改，并未反馈到FirstCtrl中。

在Directive中进行函数回调

上面我们介绍了等号=和@符号的使用方法，它们分别对应传入对象和文本。但是，如果我们期望传入一个回调函数呢？这样我们就可以实现如封装一个按钮为一个Directive，然后让它在点击后实现我们期望的功能的效果。

这就需要使用到&符号,下面我们来看看实际的例子(这个例子比较复杂，请仔细分析研读)：

  1. var App = angular.module("App", []);
  3. App.directive("formDirective", function () {
  4.     return {
  5.         restrict: "A",
  6.         scope: {
  7.             //这里使用&符号来接受传入的函数
  8.             btnClick: "&"
  9.             //注意:这里没有加入下方的value模型
  10.         },
  11.         template:
  12.         //一个用于输入文字的输入框，绑定到value上
  13.         "<input type='text' ng-model='value'><br>" +
  14.             //提交的按钮，绑定上方scope的btnClick方法
  15.             //注意传入参数的方式和HTML中具体使用的方式
  16.         "<input type='button' value='提交'  ng-click='btnClick({message:value})'>"
  17.     }
  18. });
  20. App.controller("FirstCtrl", function ($scope) {
  21.     $scope.clickBtnCallback = function (msg) {
  22.         alert("点击了按钮!信息是：" + msg);
  23.     }
  24. });

对应的HTML代码：

  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.         <!-- 注意这里绑定btn-click/btnClick中传入的参数的命名 -->
  11.         <div form-directive btn-click="clickBtnCallback(message)"></div>
  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-8 在Directive中传入函数和数据回传