Due eventi click nidificate con angularjs

Question

mi hanno una struttura HTML come questo:

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

Attualmente quando clicco sul div con l'id myId poi entrambe le funzioni ottenere innescato, ma voglio che appena test2 funzione get innescato. Come lo posso fare?

Answer 1

Tutto quello che dovete fare è fermare la propagazione dell'evento/gorgogliare.

Questo codice vi aiuterà a:

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

Se i test e test2 funzioni apparirebbe come segue, si otterrebbe solo test2 nella tua console quando si fa clic su myId DIV. Senza $event.stopPropagation() si otterrebbe test2 seguito da test nella finestra di output della console.

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

Answer 2

Stessa risposta di Tom, ma po 'diverso.

 <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

Ecco una direttiva in base a another question che supporta i collegamenti NG-href.

direttiva

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