使用 AngularJS 和 Jade 在导航栏中引导下拉菜单

Question

我正在使用 AngularJS 和 Jade 以及 angular-ui-bootstrap 在主导航中创建一个下拉菜单，它可以完美地与宽屏幕一起使用，但是在移动设备上会出现问题并且您必须切换菜单！

当您单击其中一个菜单项时，导航栏会关闭，因此无法单击子菜单中的某些内容！

移动菜单（无下拉菜单切换）

普通菜单

移动菜单应该在单击下拉菜单后的外观（但整个菜单会在您单击它时关闭）

代码：

button.navbar-toggle(type='button', ng-click='isCollapsed = !isCollapsed')
  span.icon-bar
  span.icon-bar
  span.icon-bar
.navbar-collapse(ng-class='{collapse: isCollapsed}', ng-init='isCollapsed = true', ng-click='isCollapsed = true') 
  ul.nav.navbar-nav
    li: a(href='/#/') item1
    li: a(href='/#/') item2
    li(uib-dropdown=true,dropdown-append-to-body=false)
      a(href=true,uib-dropdown-toggle=true) Dropdown
      ul.uib-dropdown-menu
        li: a(href='#/') Item 1
        li: a(href='#/') Item 2
    li: a(href='/#/') item3
    li: a(href='/#/') item4 

我怎样才能得到它，所以当我点击菜单中的下拉菜单时，它不会关闭整个内容而是显示下拉菜单？

Answer 1

首先最好移动ng-click 表达式并在此视图控制器中为它们找到一个安全的家。 ng-init 仅在非常特殊的情况下才需要，而且它会使你的 DOM 变得混乱。

$scope.isCollapsed = true;

$scope.toggleCollapseState = function($event) {
  $scope.isCollapsed = !$scope.isCollapsed;
}

// DOM
button.navbar-toggle(type='button', ng-click='toggleCollapseState')

关于您的切换问题。似乎有一个 ng-click 属性接受一个表达式（在这种情况下您想使用一个函数），您可以将其附加到具有 uib-dropdown-toggle 的元素上。

li(uib-dropdown=true,dropdown-append-to-body=false)
  a(href=true,uib-dropdown-toggle=true ng-click='navListDropdownToggled') Dropdown

然后，您可以将 ng-click 传递给表达式的 $event 局部变量用于停止传播到父元素。

$scope.navListDropdownToggled = function navListDropdownToggledFn($event) {
  $event.stopPropagation();

  // If you need to handle any toggle state-based logic 
  // you can do it by altering the isCollapsed variable.
  // $scope.isCollapsed = true;  
} 

编辑：

根据Bootstraps Documentation，还有一个on-toggle 属性也传递了$event 本地属性，因此这可能是ng-click 的更合适的替代品。