角嵌套多点击指令

Question

I have two directives one is contained within a view, the other is applied to the view's container.

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

    </div>
</div>

Markup loaded inside ng-view:

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

Application Directives:

  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);
        });
    };
}]);

When clicking the anchor tags with the tab-content directive, the tab content directive fires and it is immediately followed by the execution of the close-content directive.

Is there something I should include within the tab-content directive to prevent the close-content directive from firing when the tab-content directive is executed?

Is this not how angular is designed to interpret these interactions? Can someone point me toward a resource to obtain a better understanding of what I'm attempting to accomplish.

Any enlightenment would be greatly appreciated.

Answer 1

This is called event bubbling . The event triggered on the HTML element is first handled on the element itself and then is propagated to the parent elements upon the DOM tree - thus firing the event handlers of the parent elements.

AngularJS has nothing to do with this, it is how Javascript events work.

To stop the propagation in your case use stopPropagation() method on the event object passed into the handler:

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

This will prevent the execution of the closeContent directive's click handler.