使用AngularJS＆amp ;;导航栏中的Bootstrap下拉列表玉

Question

我正在使用AngularJS和Jade with 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更合适的替代。< / p>