AngularJS - href ng-click - event bubbling

问题

In the following example:

<div class="sub-list" ng-repeat="item in list.subItems">
  <a class="list-row" href="#">
    <span class="list-cell name">item.name</span>
    <span class="list-cell dt">item.dt</span>
    <span class="list-cell summary">
      <span class="sub-list-item" ng-click="page.updateSubStatus(item); $event.stopPropagation();">Click</span>
    </span>
    <span class="list-cell list-row-link-icon"></span>
  </a>
</div>

When I click on the span href action is also invoked due to event bubbling. I even used $event.stopPropagation but still the problem persists.

I cannot remove href in <a> tag, I need the href operation as well. On click of the item it needs to navigate to respective url but on click of span "Click" it needs to invoke my controller function.

Can some one help me how to handle the click on span tag above but not the href event.

Working Sample:

<div class="sub-list" ng-repeat="item in list.subItems">
  <a class="list-row" href="#">
    <span class="list-cell name">item.name</span>
    <span class="list-cell dt">item.dt</span>
    <span class="list-cell summary">
      <span class="sub-list-item" ng-click="page.updateSubStatus(item); $event.preventDefault();">Click</span>
    </span>
    <span class="list-cell list-row-link-icon"></span>
  </a>
</div>

回答1:

To do this you have to use Angular and jQuery event handling. See below code snippet. And working https://plnkr.co/edit/seF391qx3OcUubT8MeO7?p=preview

var app = angular.module('myApp', []);

app.controller('demoController', function($scope, $anchorScroll) {

  $scope.list = {};
  $scope.list.subItems = ['item1', 'item2', 'item3'];
  $scope.page = {};
  $scope.page.updateSubStatus = function(item) {
    alert(item);
  }
})

$(document).ready(function(){
  $('a span.sub-list-item').on('click', function(event){
    console.log(event)
    event.preventDefault();
  })
})

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="demoController">
  <div class="sub-list" ng-repeat="item in list.subItems" on-finish-render>
    <a class="list-row" href="www.google.com" >
      <span class="list-cell name">item.name</span>
      <span class="list-cell dt">item.dt</span>
      <span class="list-cell summary">
      <span class="sub-list-item" ng-click="page.updateSubStatus(item)" on-click="disableClick()">Click</span>
      </span>
      <span class="list-cell list-row-link-icon"></span>
    </a>
  </div>
</body>

</html>

来源：https://stackoverflow.com/questions/36400229/angularjs-href-ng-click-event-bubbling

标签

angularjs

event-handling