Angular Nesting Multiple Click Directives

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.

Alexander Kravets · Accepted Answer · 2016-05-31 15:24:44Z

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.

edited May 31, 2016 at 15:24

answered May 31, 2016 at 15:18

Alexander Kravets

4,4351 gold badge19 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Nesting Multiple Click Directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related