Question

我有一个指令，在点击表格行时广播一个事件。这是指令：

angular.module('app').directive('encounterItemTable', function () {
  return {
    restrict: 'A',
    replace: true,
    templateUrl: 'views/encounter.item.table.html',
    scope: {
      encounters : '='
    },

    link: function(scope) {
      scope.getSelectedRow = function(index) {
        scope.$broadcast('selectedRow', { rowIndex: index });
      };
    }
  };
});

以下是调用getSelectedRow

的标记

<tr  ng-class="{selected: $index==selectedIndex}" ng-repeat="encounter in encounters | filter:search" data-id="{{encounter.id}}" ng-click="getSelectedRow($index)">

点击行时调用我的getSelectedRow()函数。索引是正确的。另一方面，控制器从不听任何东西。这是控制器中的代码。

  $scope.$on('selectedRow', function(event, data) {
    $scope.selectedIndex = data.rowIndex;
    $scope.selectedEncounter = $scope.encounters[data.rowIndex];
  });

为什么控制器听不到这个事件？我错过了什么？

Answer 1

$ rootScope。$ broadcast。如果仅广播到当前范围，您的控制器将无法看到它。

Answer 2

$broadcast将事件发送给儿童。指令嵌套在控制器中，因此需要将事件发送到父级。使用scope.$emit通过父母推送活动。阅读标题为 Scope Events Propagation

的范围文档部分

Answer 3

我使用$rootScope.$broadcast(event, data)。我使用事件来解耦组件，即发出事件的组件和事件的监听器不需要彼此了解。

如果事件可以合理地包含在组件（指令）中，那么你必须关心DOM中侦听器/发射器的相对位置。我自己没有碰到这个，所以一般使用$rootScope.$broadcast()另一个好处是应用程序中的任何组件可以监听这些事件，因此侧边栏中的某些内容可以更新来自table（可能不在同一个DOM层次结构中）

我的控制器没有捕获从指令发送的事件

3 个答案: