複数のクリックディレクティブの角括弧

Question

ビューにはディレクティブが1つあり、ビューのコンテナには2つのディレクティブが適用されています。 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); 
     }); 
    }; 
}]); 

タブコンテンツディレクティブでアンカータグをクリックすると、タブのコンテンツディレクティブが発生し、すぐにクローズド・コンテンツ・ディレクティブが実行されます。

タブコンテンツディレクティブが実行されたときにクローズコンテンツディレクティブが起動しないように、タブコンテンツディレクティブに含めるべきことはありますか？

これは、これらの相互作用を解釈するために角度が設計されているのではありませんか？私が達成しようとしていることのより良い理解を得るために、誰かが私をリソースに向けて指すことができますか？

すべての啓発は大いに感謝します。

Answer 1

event bubblingと呼ばれます。 HTML要素でトリガされたイベントは、まず要素自体で処理され、DOMツリー上の親要素に伝播され、親要素のイベントハンドラを起動します。

AngularJSはこれとは関係がありません.Javascriptイベントの仕組みです。

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

これはcloseContentディレクティブのクリックハンドラの実行を防ぐことができます：ハンドラーに渡さeventオブジェクトにstopPropagation()メソッドを使用して、あなたのケースで伝播を停止するには

。