AngularJS ng-单击stopPropagation

5 回答

• 1

  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

  回复于 2024-04-24T15:19:50+08:00
• 113

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

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

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

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

  回复于 2024-04-24T15:19:50+08:00
• -13

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

  你会像这样使用它：

  <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();
              });
          }
     };
  });
  

  回复于 2024-04-24T15:19:50+08:00
• 745

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

  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>
  

  回复于 2024-04-24T15:19:50+08:00
• 10

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

  回复于 2024-04-24T15:19:50+08:00