AngularJS - HREFのNG-クリック - 次の例では

をバブリングイベント：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>

スパンのhrefアクションにIをクリックするも起因するイベントバブリングに呼び出されます。私も$event.stopPropagationを使用しましたが、それでも問題は解決しません。

<a>タグでhrefを削除できません。また、href操作も必要です。アイテムをクリックすると、それぞれのURLに移動する必要がありますが、スパン「クリック」をクリックすると、コントローラ機能を呼び出す必要があります。

hrefイベントではなく上記のspanタグのクリックを処理する方法を手助けできますか？あなたは角度とjQueryのイベント処理を使用する必要がこれを行うには

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

出典

2016-04-04 krsnaadi

削除のhref = "http://google.com/" –

アドオンからNGクリック= "page.updateSubStatus（項目）; $するevent.stopPropagation（）;" と削除href = "＃" –

いいえ私はそれを行うことはできません、私は同様にhref操作が必要です。アイテムをクリックすると、ナビゲートする必要がありますが、「クリック」すると、コントローラの機能を呼び出す必要があります。 @hadiJZ – krsnaadi

：サンプル作業

。下記のコードスニペットを参照してください。そして、作業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="[email protected]" 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>

出典

2016-04-04 13:21:37

答えてくれてありがとう、event.preventDefault（）は働いた.. !! – krsnaadi

AngularJS - HREFのNG-クリック - 次の例では

答えて

関連する問題