각도 중첩 다중 클릭 지시문

Question

두 개의 지시문이 하나의보기에 포함되어 있고 다른 하나는보기의 컨테이너에 적용됩니다. NG-내부보기로드

<div id="content" data-panel='{{ pNav }}' close-content> 
    <div class="inner reveal-animation" ng-view> 

    </div> 
</div> 

마크 업 :

<div class="inner-content services"> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2 general-content"> 
      <h1>Our Services</h1> 
      <ul class="tab-nav"> 
       <li><a href="" class="cx" tab-content><span>AB</span> Customer Service</a></li> 
       <li><a href="" class="bx" tab-content><span>CD</span> Existing Applciations</a></li> 
      </ul> 
      <div class="tab-content"> 

      </div> 
     </div> 
    </div> 
</div> 

응용 프로그램 지침 :

myApp.directive('closeContent',['PanelServ', function(PanelServ){ 

    return function(scope, element, attrs){ 

    element.on('click', function(){ 
    }); 

    }; 

}]); 

myApp.directive('tabContent',['PanelServ', function(PanelServ){ 

    return function(scope, element, attrs){ 
     element.on('click', function() { 
      console.log(element); 
     }); 
    }; 
}]); 

탭 콘텐츠 지시문 앵커 태그를 클릭, 탭 내용 지시어가 실행되면 즉시 close-content 지시어가 실행됩니다.

탭 컨텐트 지시문을 실행할 때 클로즈 컨텐트 지시문이 실행되지 않도록하기 위해 탭 컨텐트 지시문에 포함시켜야 할 것이 있습니까?

각도가 이러한 상호 작용을 해석하는 방법이 아닌가요? 누군가가 내가하려고하는 것에 대해 더 잘 이해할 수 있도록 자원을 향해 나를 가리킬 수 있습니까?

어떤 계발이라도 대단히 감사하겠습니다.

Answer 1

이것을 event bubbling이라고합니다. HTML 요소에서 트리거 된 이벤트는 먼저 요소 자체에서 처리 된 다음 DOM 트리의 부모 요소에 전파되어 부모 요소의 이벤트 처리기를 시작합니다.

AngularJS는 이와 관련이 없으며 Javascript 이벤트가 작동하는 방식입니다.

는 귀하의 경우 전파 핸들러에 전달 된 event 객체에 stopPropagation() 방법을 사용 중지하려면

myApp.directive('tabContent',['PanelServ', function(PanelServ){ 
    return function(scope, element, attrs){ 
     element.on('click', function (event) { 
      event.stopPropagation(); 
      console.log(element); 
     }); 
    }; 
}]); 

이

는 closeContent 지침의 클릭 핸들러의 실행을 방지 할 수 있습니다.