Hai sự kiện nhấp chuột lồng nhau với angularjs

Question

Tôi có một cấu trúc HTML như thế này:

<div ng-click="test()"> 
    <div id="myId" ng-click="test2()"></div> 
    <div></div> 
    ... 
</div> 

Hiện nay khi tôi bấm vào div với id myId sau đó cả hai chức năng được kích hoạt, nhưng tôi muốn điều đó chỉ test2 chức năng được được kích hoạt. Làm thế nào tôi có thể làm điều đó?

Answer 1

Tất cả những gì bạn cần làm là dừng tuyên truyền/bong bóng sự kiện.

Mã này sẽ giúp bạn:

<div ng-click="test()">ZZZZZ 
    <div id="myId" ng-click="test2();$event.stopPropagation()">XXXXX</div> 
    <div>YYYYYY</div> 
    ... 
</div> 

Nếu test và test2 bạn chức năng sẽ trông như sau, bạn sẽ nhận được chỉ test2 trong giao diện điều khiển của bạn khi nhấp vào myId DIV. Nếu không có $event.stopPropagation(), bạn sẽ nhận được test2 theo sau là test trong cửa sổ đầu ra của bảng điều khiển.

$scope.test = function() { 
    console.info('test'); 
} 
$scope.test2 = function() { 
    console.info('test2'); 
} 

Answer 2

Giống như câu trả lời của tom, nhưng hơi khác.

 <div ng-click="test()"> 
      <div id="myId" ng-click="test2($event)">child</div> 
     </div> 

     $scope.test2 =function($event){ 
      $event.stopPropagation(); 
      console.log("from test2") 
     } 
     $scope.test =function(){ 
      console.log("from test") 
     } 

Answer 3

Đây là chỉ thị dựa trên another question hỗ trợ liên kết ng-href.

Chỉ

'use strict'; 


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

/** 
* @ngdoc directive 
* @name myMobileApp.directive:stopEvent 
* @description Allow normal ng-href links in a list where each list element itselve has an ng-click attached. 
*/ 
angular.module('myApp') 
    .directive('stopEvent', function($location, $rootScope) { 
    return { 
     restrict: 'A', 
     link: function(scope, element) { 
     element.bind('click', function(event) { 

     // other ng-click handlers shouldn't be triggered 
     event.stopPropagation(event); 
     if(element && element[0] && element[0].href && element[0].pathname) { 
      // don't normaly open links as it would create a reload. 
      event.preventDefault(event); 
      $rootScope.$apply(function() { 
      $location.path(element[0].pathname); 
      }); 
     } 
     }); 
     } 
    }; 
    }) 


.controller('TestCtrl', ['$rootScope', '$scope', 'Profile', '$location', '$http', '$log', 
    function($rootScope, $scope, Profile, $location, $http, $log) { 
    $scope.profiles = [{'a':1,'b':2},{'a':3,'b':3}]; 

    $scope.goToURL = function(path, $event) { 
     $event.stopPropagation($event); 
     $location.path(path); 
    }; 

    } 
]); 

<div ng-repeat="x in profiles" 
    ng-click="goToURL('/profiles/' + x.a, $event)"> 

     <a stop-event ng-href="/profiles/{{x.b}}">{{x}}</a> 

    </div>