AngularJS-href ng点击-事件冒泡

在以下示例中：

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

当我单击span href操作时，由于事件冒泡，也会调用该操作。我甚至使用了$event.stopPropagation，但问题仍然存在。

我无法删除<a>标记中的href，我也需要href操作。单击项目时，它需要导航到相应的url，但单击span"click"时，需要调用我的控制器功能。

有人能帮助我如何处理上面的点击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>

要做到这一点，您必须使用Angular和jQuery事件处理。请参阅下面的代码片段。和工作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>

相关内容

最新更新

热门标签：