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

时间:2016-10-20 11:24:02

标签: javascript angularjs

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

class Question(models.Model):
   whom = models.ForeignKey('UserProfile', related_name='whom_Question')
   who_liked = models.ForeignKey('UserProfile', related_name='who_liked_QUESTION')

class Notification(models.Model)
   who_liked = models.ForeignKey('UserProfile', related_name='who_liked_Notification')
   whom = models.ForeignKey('UserProfile', related_name='whom_Notification')

在matchHeight指令中,我正在侦听数据加载事件

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');
      });
}]);

我正在使用ui-router来管理各州 这是HTML

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
  };
}]);

未在指令中拾取广播事件。我做错了什么?

1 个答案:

答案 0 :(得分:0)

由于您位于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
  };
}]);