Question

我在AngularJS中创建了一个表组件，但我遇到了一个无法解决的错误。

我的表结构如下：

<table>
  <thead>...</thead>
  <tbody>
    <tr ng-click="selectRow()" ng-repeat="$value in values track by $index" ng-click="selectRow($index,$value)>
       <td><input type="checkbox" ng-model="$value.__checked"  ng-click="selectRow($index,$value)"/></td>
    </tr>
  </tbody>
</table>

当我点击该行时，它工作正常，但是当我点击复选框时它没有按预期工作，并且两次触发事件。我认为只要在selectRow上使用stopPropagation（），当它被复选框触发时就可以了，但它没有。

函数selectRow可用于多个和单个选择。

function selectRow(ngRepeatIndex,ngRepeatValue){
    var selectedValues = $scope.$parent.selectedValues;
    cleanValueAndArrays(vm.checkAll,vm.checkAll);
    if($attrs.onClick)vm.onClick({value: ngRepeatValue});
    if(vm.config.selection == 'single'){
      if(ngRepeatValue.__checked){
        ngRepeatValue.__checked = false;
        cleanArrays();
      } else {
        cleanValueAndArrays(vm.selectedIndexes.length > 0)
        pushToArrays(ngRepeatValue,ngRepeatIndex);
        ngRepeatValue.__checked = true;
      }
    } else {
      ngRepeatValue.__checked = vm.selectedIndexes.filter(function(val){return val == ngRepeatIndex}).length < 1;
      if((ngRepeatValue.__checked) || vm.selectedIndexes.length == 0 ){
        pushToArrays(ngRepeatValue,ngRepeatIndex);
        return 0;
      }
      var indexOfValueSelected;
      selectedValues.forEach(function(val,indx){
        if(angular.equals(val,ngRepeatValue)) indexOfValueSelected = indx;
      })
      $scope.$parent.selectedValues.splice(indexOfValueSelected, 1);
      vm.selectedIndexes.splice(vm.selectedIndexes.indexOf(ngRepeatIndex),1);
    }
  }

Answer 1

删除第二次ng-click，没用，如果单击复选框，将会调用行上的ng-click。

Answer 2

创建一个停止事件传播的指令。

moduleName.directive('preventDefault', function () {
    return function (scope, element, attrs) {
        $(element).click(function (event) {
            event.preventDefault();
        });
    }
});

您可以按照以下方式使用它：

<table>
  <thead>...</thead>
  <tbody>
    <tr ng-repeat="$value in values track by $index" ng-click="selectRow($index,$value) prevent-default>
       <td><input type="checkbox" ng-model="$value.__checked"/></td>
    </tr>
  </tbody>
</table>

Answer 3

试试这个：

<table>
  <thead>...</thead>
  <tbody>
    <tr ng-click="selectRow()" ng-repeat="$value in values track by $index" ng-click="selectRow($index,$value)>
       <td><input type="checkbox" ng-model="$value.__checked"  ng-click="selectRow($index,$value); $event.stopPropagation();"/></td>
    </tr>
  </tbody>
</table>

如何防止$ fire事件两次

3 个答案: