title: Auto collapse push navigation when clicking on the body using a AngularJs directive
body: <p>I am creating this push navigation using a directive with AngularJS, I know this components is very common but I didn't want to use a plugin, when user clicks/toggles the nav button, this animates the menu container along with the body and adds/remove 'is-open' class to body.</p>
  
  <p>The question is how can I check for when the push menu/body are open and add a click event to auto collapse the push menu? I created a <a href="https://jsfiddle.net/creativestudio/0ofvv7ok/" rel="nofollow">jsfiddle</a></p>
  
  <p>and this is my directive:</p>
  
  <pre><code>angular.module('creativestudioApp')
        .directive('pushNav', function() {
            return {
                restrict: 'EA',
                link: function(scope, element, attrs) {
  
                    element.on('click', function(event) {
  
                        element.toggleClass('is-open');
  
                        if (element.hasClass('is-open')) {
  
                            console.log('is-open');
  
                            $('body').addClass('is-open');
                            $('body').animate({
                                right: "184"
                            }, 200);
                            $('.push-nav').animate({
                                right: "0"
                            }, 200);
  
                            console.log('has class');
  
                        } else {
                            console.log('is-close');
  
                            $('body').removeClass('is-open');
                            $('body').animate({
                                right: "0"
                            }, 200);
                            $('.push-nav').animate({
                                right: "-184"
                            }, 200);
                        }
  
                    });
                }
            };
        });
  </code></pre>