• Directive之间互相通讯

    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之间通讯