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到达所有后代。

Answer 2

创建将重用的指令（包括ngRepeat）时，最佳做法是为指令创建隔离范围。这样您就可以发送trayID而无需使用事件。查看有关指令here的AngularJS文档中的隔离范围部分。

ng-repeat中的指令

2 个答案: