使用AngularJS将事件正确广播到特定的指令元素

我正在尝试向我的应用程序添加一些UI功能，但不确定这样做的最佳方式。我在一个页面上有两个表，一个称为Active，另一个称为Inactive。非活动表具有包含将其添加到活动表的按钮的。有一个API调用涉及，所以我想禁用按钮，并使该按钮的整个不透明：0.4。我尝试向每一行添加一个指令，然后使用$scope.$broadcast发出按钮被单击的事件。问题是，这会为我的表中的每个项发出事件，而不仅仅是我使用按钮激活的事件

在按钮单击和DOM元素获得CSS更改之间绑定这种关系的正确方法是什么

<tr ng-repeat="active in Dataset sk-row>
   <td>{{ active.Customer }}</td>
   <td style="text-align:right"><input type="button" class="btnPlain" value="Add to Backups" ng-click="activateBackup(active)" /></td>

</tr>

指示

---

如果我正确理解了您的问题，一个简单的event.stopPropagation应该可以解决您的问题

scope.$on('removedFromTable', function (event, data) {
  event.stopPropagation();
  elem.css('opacity', '0.4');
});

更新 当activateBackup$从parentScope广播时，我建议发送整个事件数据，并在侦听器函数中手动检查它

$scope.activateBackup = function (itemData) {
   $scope.$broadcast('removedFromTable', itemData);
}

<tr ng-repeat="active in Dataset" sk-row="active.whateverIdentifier">...</tr>

scope.$on('removedFromTable', function (event, data) {
   if(data.identifier === attr['sk-row'])
      elem.css('opacity', '0.4');
});

---

一种方法是以相反的方式触发事件，即使用$emit

并使用以下命令传递itemScope，如下所示：

<tr ng-repeat="active in Dataset" sk-row>
  <td>{{ active.Customer }}</td>
  <td style=" text-align:right ">
    <input type="button" class="btnPlain " value="Add to Backups " ng-click="activateBackup(active, this)" />
  </td>
</tr>

---

示例Plunker:

请提供apunkr或jsfiddle。RgdsI希望在我的应用程序中的所有表上都有这种效果，因此我不想在我的指令中定义的模板，因为它会根据表进行更改。我非常清楚您的问题所在。在我发布回复之前，您可以发布活动表和非活动表的HTML标记吗？问题是activateBackup就在我的控制器$scope上，所以当它$scope.$广播事件时，只有特定行知道如何更改不透明度？在DOM中有大量的sk row指令，因此不清楚需要修改哪些指令这正是我所期望的。在这种情况下，你最好的机会是发送整个事件的数据，并在监听器中检查。好的，这就是我所害怕的哈哈。。相反，我认为我将只为这个特定的表行创建这个指令，然后我可以使用该指令的链接范围来设置不透明度，然后调用父控制器activateBackup函数。这似乎是可行的，okI也会采用这种方法。啊，这是个好主意。我不知道您可以跨该特定范围发出事件

$scope.activateBackup = function (itemData) {
   $scope.$broadcast('removedFromTable', itemData);
}

<tr ng-repeat="active in Dataset" sk-row="active.whateverIdentifier">...</tr>

scope.$on('removedFromTable', function (event, data) {
   if(data.identifier === attr['sk-row'])
      elem.css('opacity', '0.4');
});

$scope.activateBackup = function(itemData, itemScope) {
  itemScope.$emit('removedFromTable');
};

<tr ng-repeat="active in Dataset" sk-row>
  <td>{{ active.Customer }}</td>
  <td style=" text-align:right ">
    <input type="button" class="btnPlain " value="Add to Backups " ng-click="activateBackup(active, this)" />
  </td>
</tr>

scope.$on('removedFromTable', function(event, data) {
  event.stopPropagation();
  elem.css('opacity', '0.4');
});