Javascript Angularjs切换移动导航菜单未关闭

我正在开发一个简单的SPA并使用html模板。模板有移动导航，但当我使用angularjs路线时，移动导航不会关闭。那么，单击后如何隐藏导航

这是Jquery代码

注意：导航有一个子菜单

  $('.nav-menu').superfish({
    animation: {
      opacity: 'show'
    },
    speed: 400
  });

  // Mobile Navigation
  if ($('#nav-menu-container').length) {
    var $mobile_nav = $('#nav-menu-container').clone().prop({
      id: 'mobile-nav'
    });
    $mobile_nav.find('> ul').attr({
      'class': '',
      'id': ''
    });
    $('body').append($mobile_nav);
    $('body').prepend('<button type="button" id="mobile-nav-toggle"><i class="fa fa-bars"></i></button>');
    $('body').append('<div id="mobile-body-overly"></div>');
    $('#mobile-nav').find('.menu-has-children').prepend('<i class="fa fa-chevron-down"></i>');

    $(document).on('click', '.menu-has-children i', function(e) {
      $(this).next().toggleClass('menu-item-active');
      $(this).nextAll('ul').eq(0).slideToggle();
      $(this).toggleClass("fa-chevron-up fa-chevron-down");
    });

    $(document).on('click', '#mobile-nav-toggle', function(e) {
      $('body').toggleClass('mobile-nav-active');
      $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
      $('#mobile-body-overly').toggle();
    });

    $(document).click(function(e) {
      var container = $("#mobile-nav, #mobile-nav-toggle");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($('body').hasClass('mobile-nav-active')) {
          $('body').removeClass('mobile-nav-active');
          $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
          $('#mobile-body-overly').fadeOut();
        }
      }
    });
  } else if ($("#mobile-nav, #mobile-nav-toggle").length) {
    $("#mobile-nav, #mobile-nav-toggle").hide();
  }

$（'.nav菜单'）.superfish({
动画：{
不透明度：“显示”
},
速度：400
});
//移动导航
如果（$（'#导航菜单容器'）。长度）{
var$mobile_nav=$（“#nav菜单容器”）.clone（）.prop({
id:'移动导航'
});
$mobile_nav.find（'>ul'）.attr({
“类”：“，
“id”：”
});
$（'body'）。追加（$mobile_nav）；
$（'body'）。前缀（“”）；
$（'body'）。追加（''）；
$（“#移动导航”）.find（“.menu有子菜单”）.prepend（“”）；
$（文档）。在（'单击'，'）上。菜单有子项i'，函数（e）{
$（this）.next（）.toggleClass（'menu-item-active'）；
$（this.nextAll（'ul'）.eq（0）.slideToggle（）；
$（此）.toggleClass（“fa V形向上fa V形向下”）；
});
$（文档）。打开（'单击'，'移动导航切换'），功能（e）{
$（'body'）.toggleClass（'mobile-nav-active'）；
$（“#移动导航切换i”）.toggleClass（'fa-times-fa-bar'）；
$（“#移动体”）.toggle（）；
});
$（文档）。单击（函数（e）{
var容器=$（“#移动导航，#移动导航切换”）；
如果（！container.is（e.target）&&container.has（e.target）.length==0）{
if（$（'body'）.hasClass（'mobile-nav-active'））{
$（'body'）.removeClass（'mobile-nav-active'）；
$（“#移动导航切换i”）.toggleClass（'fa-times-fa-bar'）；
$（“#移动体”）.fadeOut（）；
}
}
});
}else if（$（“#移动导航，#移动导航切换”）.length）{
$（“#移动导航，#移动导航切换”）.hide（）；
}

在

NavCtrl

$scope.showNav = false

其值将在单击时切换

ng-click="showNav=!showNav" . 

现在将此变量放入

ng show

中

<nav-menu> 
   <nav-buttons ng-repeat="item in menuItems" ng-click="showNav=!showNav" ng-show="showNav">
     <!-- other child DOMs -->
   </nav-buttons>
</nav-menu>

---

如果你想要更好的动画等等，你需要做的不止这些。您可以参考

ui.bootstrap

让我知道我的答案是否有用，或者我是否需要添加更多详细信息