在指令中监听控制器的广播事件

Question

我有一个控制器，当一些内容像这样加载时广播一个事件

angular.module('myApp')
  // Using rootScope now
  .controller('SubCtrl', ['$rootScope', '$scope', '$http', function ($rootScope, $scope, $http) {
    $http.get('/scripts/data/content.json')
      .then(function(response) {
        $scope.content = response.data;
        $rootScope.$broadcast('dataloaded');
      });
}]);

在matchHeight指令中，我正在侦听dataloaded事件

angular.module('myApp')
  .directive('matchHeight', ['$timeout', function ($timeout) {
    var linkFunction = function(scope, element, attrs) {
      scope.$on('dataloaded', function() {
        $timeout(function() {
          angular.element(element).matchHeight(attrs);
        });
      });
  };

  return {
    restrict: 'A',
    link: linkFunction
  };
}]);

我正在使用ui-router来管理状态这是HTML

<div class="row usps">
  <div class="col-sm-4 usp-block" ng-repeat="block in content.marketing" match-height>
    // Inner HTML
  </div>
</div>

广播事件未从指令中获取。 我究竟做错了什么？

Answer 1

由于您位于ngRepeat内部，因此只有在广播触发后才会呈现内容，因此指令将会呈现。 然后你的指令链接只会订阅该事件但它不会执行，因为它已经在ngRepeat完成呈现你的指令之前执行了。

为了解决这个问题，每次更改数组时， ngRepeat都会重新创建列表，因此必须在必要时重新构建指令，这样您就不必监听事件了。

angular.module('myApp')
  .directive('matchHeight', ['$timeout', function ($timeout) {
    var linkFunction = function(scope, element, attrs) {
      $timeout(function() {
        angular.element(element).matchHeight(attrs);
      });
  };

  return {
    restrict: 'A',
    link: linkFunction
  };
}]);