Question

我正在尝试为我的应用程序添加一些UI功能，并且不确定最佳方法。我在页面上有2个表，一个名为Active，另一个名为Inactive。非活动表具有<td>，其中包含用于将其添加到活动表的按钮。有一个API调用，所以我想禁用该按钮，并使该按钮的整个<tr>都有一个opacity: 0.4。我尝试向每一行添加一个指令，然后使用$scope.$broadcast我发出单击该按钮的事件。问题是，这会在我的表中为每个<tr>发出事件，而不是仅使用按钮激活的事件。

在按钮点击和<tr> 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>

activateBackup功能

 $scope.activateBackup = function (itemData) {

        $scope.$broadcast('removedFromTable');

}

指令

app.directive('skRow', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attr) {
            scope.$on('addedToTable', function (event, data) {
                elem.css('backgroundColor','#fff');
                elem.animate({
                    'backgroundColor':'#000'
                }, 1000);
            });

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

Answer 1

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

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

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

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

Answer 2

一个想法是以相反的方式发起事件，即使用$emit()。

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

并使用itemScope中的this传递ng-click，如下所示：

<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>

与$broadcast不同，使用$emit时，您可以致电event.stopPropagation()。

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

示例Plunker： http://plnkr.co/edit/9YH4VFfHUvsqKPHw9Ida?p=preview

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

2 个答案: