AngularJS ng-单击stopPropagation

时间:2013-11-30 13:34:56

标签: javascript angularjs angularjs-ng-click

我在表格行上有一个Click事件,在这一行中还有一个带有Click事件的删除按钮。当我单击删除按钮时,也会触发行上的单击事件。

这是我的代码。

<tbody>
  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>{{user.email}}</td>
    <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
  </tr>
</tbody>

当我单击表格单元格中的删除按钮时,如何防止showUser事件被触发?

5 个答案:

答案 0 :(得分:770)

ngClick指令(以及所有其他事件指令)创建在同一范围内可用的$event变量。此变量是对JS event对象的引用,可用于调用stopPropagation()

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER

答案 1 :(得分:120)

Stewie答案的补充。如果您的回调决定是否应该停止传播,我发现将$event对象传递给回调很有用:

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>

然后在回调本身中,您可以决定是否应该停止事件的传播:

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

答案 2 :(得分:10)

我写了一个指令,可以限制点击有效的区域。它可以用于像这样的某些场景,因此您不必根据具体情况处理点击,而只是说“点击不会来自此元素”。

您可以这样使用它:

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>

请注意,这会阻止最后一个单元格的所有点击,而不仅仅是按钮。如果这不是你想要的,你可能想要像这样包装按钮:

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>

这是指令的代码:

angular.module('awesome', []).directive('isolateClick', function() {
    return {
        link: function(scope, elem) {
            elem.on('click', function(e){
                e.stopPropagation();
            });
        }
   };
});

答案 3 :(得分:1)

如果你正在使用像我这样的指令,当你需要两个数据方式绑定时,例如在更新任何模型或集合中的属性之后,这就是它的工作原理:

angular.module('yourApp').directive('setSurveyInEditionMode', setSurveyInEditionMode)

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // In order to work with stopPropagation and two data way binding
        // if you don't use scope.$apply in my case the model is not updated in the view when I click on the element that has my directive
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('inside the directive')
        });
      });
    }
  }
}

现在,您可以轻松地在任何按钮,链接,div等中使用它,如下所示:

<button set-survey-in-edition-mode >Edit survey</button>

答案 4 :(得分:-14)

<ul class="col col-double clearfix">
 <li class="col__item" ng-repeat="location in searchLocations">
   <label>
    <input type="checkbox" ng-click="onLocationSelectionClicked($event)" checklist-model="selectedAuctions.locations" checklist-value="location.code" checklist-change="auctionSelectionChanged()" id="{{location.code}}"> {{location.displayName}}
   </label>



$scope.onLocationSelectionClicked = function($event) {
      if($scope.limitSelectionCountTo &&         $scope.selectedAuctions.locations.length == $scope.limitSelectionCountTo) {
         $event.currentTarget.checked=false;
      }
   };