Question

在以下示例中：

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

当我点击跨度时，由于事件冒泡也会调用动作。我甚至使用$event.stopPropagation，但问题仍然存在。

我无法删除<a>标签中的href，我也需要href操作。点击该项目，它需要导航到相应的URL，但点击跨度“点击”它需要调用我的控制器功能。

有人可以帮助我处理上面的span标记点击，而不是href事件。

工作样本：

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

Answer 1

要做到这一点，你必须使用Angular和jQuery事件处理。请参阅下面的代码段。工作https://plnkr.co/edit/seF391qx3OcUubT8MeO7?p=preview

＆＃13;

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

＆＃13;

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

＆＃13;

AngularJS - href ng-click - 事件冒泡

1 个答案: