angularjs가 포함된 두 개의 중첩 클릭 이벤트

angularjs가 포함된 두 개의 중첩 클릭 이벤트

저는 다음과 같은 HTML 구조를 가지고 있습니다.

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

현재 를 클릭하면div아이디로myId두 가지 기능이 모두 작동하게 됩니다.test2함수가 트리거됩니다.내가 어떻게 그럴 수 있을까?

필요한 것은, 이벤트의 전파나 버블링을 정지하는 것 뿐입니다.

이 코드는 다음을 지원합니다.

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

만약 당신이test그리고.test2함수는 다음과 같습니다.test2를 클릭할 때 콘솔에서myIdDIV. 미포함$event.stopPropagation()얻을 수 있을 것이다test2이어서test콘솔 출력창에 표시됩니다.

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

톰의 대답과 같긴 하지만 조금 다르지.

        <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")
        }

다음은 ng-href 링크를 지원하는 다른 질문에 근거한 지시입니다.

지시.

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

언급URL : https://stackoverflow.com/questions/15390393/two-nested-click-events-with-angularjs