Directive之间互相通讯

本节是Directive的高级使用方法之一，通过赋予Directive之间互相通讯的功能，我们可以将部件的抽象化提升到一个更高的层次。

本节将通过官方网站中一个较复杂的例子来讲解具体的使用方法，通过Directive的配置，将HTML中的代码自动抽取为一个Tab列表，点击Tab列表中的标题，则可自动的显示Tab中包含的内容。

在JavaScript代码中，我们声明了2个Directive，gqTabContainer和gqTabContent。

gqTabContainer中加入了controller这项配置，并封装了panes用于存储数据，$scope.select用于接收界面点击事件，以及一个addPane方法用于接收gqTabContent的调用。

gqTabContent中加入了require这项配置，获取的对象作为第四个参数传入link()函数。

  1. var App = angular.module("App", []);
  3. App.directive("gqTabContainer", function () {
  4.     return {
  5.         restrict: 'E',
  6.         transclude: true,
  7.         scope: {},
  8.         //注意这里为tabContainer增加了一个controller，并引入了$scope
  9.         controller: ['$scope', function ($scope) {
  10.             var panes = $scope.panes = [];
  12.             //tab列表中项目被选中（点击）的处理函数
  13.             $scope.select = function (pane) {
  14.                 angular.forEach(panes, function (pane) {
  15.                     pane.selected = false;
  16.                 });
  17.                 pane.selected = true;
  18.             };
  20.             //初始化页面时，供其他Directive调用的注册函数
  21.             this.addPane = function (pane) {
  22.                 if (panes.length === 0) {
  23.                     $scope.select(pane);
  24.                 }
  25.                 panes.push(pane);
  26.             };
  27.         }],
  28.         //注意templateUrl的命名
  29.         templateUrl: "gqTabList"
  30.     };
  31. });
  33. App.directive('gqTabContent', function () {
  34.     return {
  35.         //获取gqTabContainer这个Directive
  36.         require: '^gqTabContainer',
  37.         restrict: 'E',
  38.         transclude: true,
  39.         scope: {
  40.             title: '@'
  41.         },
  42.         //第四个参数是获取到的Directive
  43.         link: function (scope, element, attrs, tabContainer) {
  44.             //调用了上方gqTabContainer的addPane()方法
  45.             //注意参数命名，不需要和上方Directive一致
  46.             tabContainer.addPane(scope);
  47.         },
  48.         //注意templateUrl的命名
  49.         templateUrl: "gqTabContent"
  50.     };
  51. });

在HTML代码中，我们直接使用了gq-tab-container和gq-tab-content。

  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 href="css/style.css" rel="stylesheet">
  7. </head>
  8. <body>
  10. <script type="text/javascript" src="components/jquery/dist/jquery.js"></script>
  11. <script type="text/javascript" src="components/angular/angular.js"></script>
  12. <script type="text/javascript" src="js/app.js"></script>
  14. <gq-tab-container>
  15.     <gq-tab-content title="标签1">
  16.         <h4>标题1</h4>
  17.         <p>这是第一个标签下的内容</p>
  18.     </gq-tab-content>
  19.     <gq-tab-content title="标签2">
  20.         <h4>标题2</h4>
  21.         <p>这是第二个标签下的内容</p>
  22.     </gq-tab-content>
  23. </gq-tab-container>
  25. <!--这里为了将文件整理在一起，使用了ng-template的方式-->
  26. <script type="text/ng-template" id="gqTabList">
  28.     <ul>
  29.         <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
  30.             <a href="" ng-click="select(pane)">{{pane.title}}</a>
  31.         </li>
  32.     </ul>
  33.     <div ng-transclude></div>
  35. </script>
  37. <script type="text/ng-template" id="gqTabContent">
  39.     <div ng-show="selected" ng-transclude>
  40.     </div>
  42. </script>
  44. </body>
  45. </html>

运行效果：

  • 当点击”标签1”或”标签2”时，下方会自动展示对应的内容。

    图5-16 Directive之间通讯