ng-repeat中的指令

Question

我正在尝试在ng-repeat内部获得一个指令来工作..当它在HTML中被硬编码但是在切换到ng-repeat之后它工作的某些方面停止工作.

<div ng-repeat="section in filterSections" filter-tray>
 Test {{section.label}}
</div>

我有一个带有控制器的模块,可以发出事件:

controller: function($scope, $element) {
     this.activateTray = function(trayID) {
          $scope.$emit('filterTray::show', {
              tray: trayID
          });
     };
};

我在页面上有一个指令 - 它应该从控制器接收事件.由于切换到使用ng-repeat接收事件已停止工作.它仍然初始化,它只是不听事件.

.directive('filterTray', function() {
     return {
          restrict: 'A',
          require: '^filter',
          link: function($scope, $element, attrs, filterNavController) {
               console.log('this debug statement works');
               $scope.$on('filterTray::show', function(e, data) {
                   console.log('this debug statement never runs');
               });
          }    
     };
})

由于添加重复,$ scope变量受到影响？也许$ on不再听正确的事了吗？任何想法/提示将不胜感激!

Answer 1

是 - ngRepeat创建新范围.
不确定事件是否是正确的设计选择,但如果是,则使用broadcast而不是发射,事件将达到指令的范围.

controller: function($scope, $element) {
     this.activateTray = function(trayID) {
          $scope.$broadcast('filterTray::show', {
              tray: trayID
          });
     };
};

• emit 向所有祖先射击范围树上的事件
• broadcast 到达所有后代.