从另一个指令执行/呈现指令

Question

我有以下两个指令.在DirectiveA我从远程服务器获取一些数据,然后呈现与该数据作为模板anchor标签.现在,当用户点击任何一个链接,我broadcast发生事件并听取该事件DirectiveB.在DirectiveB中我想制作另一个ajax请求,当我收到数据响应时,我想渲染DirectiveB模板.我当前的方法不起作用,因为它在开始时执行两个指令,那时我没有任何数据DirectiveB.下面是代码

DirectiveA

angular.module('app').directive('DirectiveA', function ($http) {
    'use strict';

    return {
        restrict: 'E',
        templateUrl: '/templates/templateA.html',
        controller: function ($scope) {
            $scope.showDetails = function (num) { // <-- this executes in ng-click in template
                $scope.$broadcast('season', num);
            };
        },

        link: function (scope, element, attributes) {
            $http.get(attributes.resource).then(function (response) {
                scope.rows = response.data;
                scope.seasons = [];

                for (var i = 0; i < scope.rows.length; i++) {
                    var num = parseInt(scope.rows[i].data);

                    if (year >= 2005 && year <= 2015) {
                        scope.seasons.push({ 'data': scope.rows[i].data });
                    }
                }
            });
        }
    };
});

这是DirectiveB

angular.module('app').directive('DirectiveB', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/templateB.html',
        controller: function($scope, $http) {
            $scope.$on('season', function ($scope, num) { // I listen to that event
                $http.get('http://demo.com/api/' + num).then(function (response) {
                    $scope.standings = response.data;
                });
            });
        }
    };
});

UPDATE

这是我在HTML中使用它的方式

<directive-a resource="http://demo.com/api/>
</directive-a>

<directive-b></directive-b>

UPDATE

我还在等待它的解决方案.

更新3

templateA

<ul>
    <li ng-repeat="row in seasons"> 
        <a href="#" ng-click="showDetails(row.season)">{{ row.season }}</a>
    </li>
</ul>

模板B.

<h3>Standings</h3>
<table>
    <thead>
        <th ng-repeat="standing in standings" ng-if="state">{{ position  }}</th>
    </thead>
    <tbody>
        <tr ng-repeat="row in standings">
            {{ row.Driver  }}
        </tr>
    </tbody>
</table>

Answer 1

你的问题归结为：

1. DirectiveA如何保证和之间的沟通DirectiveB

   由于您的两个指令使用相同的范围，因此您的事件广播解决方案有效。一旦您将DDOscope内的设置更改为除 之外的任何其他值，此操作就会中断。false

   这就是为什么我建议您$broadcast参加 的活动$rootScope。

2. 数据准备好后如何渲染DirectiveB模板

   简单地ngIf包装指令的模板就可以完成这项工作。我们不需要任何花哨的东西。

波纹管是一个简单的工作示例。请注意这两个指令如何使用隔离范围 - 这只是为了展示您需要的原因$rootScope.$broadcast。我还使用它$timeout来模拟服务器的延迟。

angular
  .module('myApp', [])
  .directive('directiveA', function() {
    return {
      templateUrl: 'tempA.html',
      controller: function($rootScope, $scope) {
        $scope.sendMessage = function(message) {
          $rootScope.$broadcast('eventName', message);
        };
      },
      scope: {}
    };
  })
  .directive('directiveB', function() {
    return {
      templateUrl: 'tempB.html',
      controller: function($rootScope, $scope, $timeout) {
        $scope.messages = [];

        $rootScope.$on('eventName', function(event, message) {
          $timeout(function() {
            $scope.messages.push(message);
          }, 50);
        });
      },
      scope: {}
    };
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<div ng-app="myApp">
  <directive-a></directive-a>
  <directive-b></directive-b>

  <script type="text/ng-template" id="tempA.html">
    <h2>Hello from DirectiveA</h2>
    <label>
      <p>Message to send to DirectiveB</p>
      <input type="text" ng-model="toSend">
    </label>
    <button type="button" ng-click="sendMessage(toSend); toSend = '';">Send</button>
  </script>
  <script type="text/ng-template" id="tempB.html">
    <div ng-if="messages.length > 0">
      <h3>Hello from DirectiveB</h3>
      <ul>
        <li ng-repeat="message in messages track by $index">{{ message }}</li>
      </ul>
    </div>
  </script>
</div>