0

I'm using AngularJS and Jade with angular-ui-bootstrap to create a dropdown menu within the main navigation, it works perfectly with a wide screen however the problem occurs when on mobile and you have to toggle the menu!

When you click on one of the menu items the navbar closes, so clicking something within the submenu isnt possible!

Mobile Menu (without dropdown Toggled) Mobile Menu Screenshot

Normal Menu Normal Menu Screenshot

How the mobile menu should look after clicking the dropdown (but the whole menu just closes when you click it) How it should look

The Code:

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 

How can i get it so when i click on the dropdown within the menu it doesnt close the whole thing and instead shows the dropdown?

1
  • Do you have a plnkr or codepen for this? Or could you show the parent elements for this button and .navbar-collapse. Commented Nov 13, 2015 at 16:39

1 Answer 1

1

First it would be best to move the ng-click expressions and find them a safe home in this views Controller. ng-init is only needed in very specific cases plus it clutters up your DOM.

$scope.isCollapsed = true;

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

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

In regards to your toggling issue. It appears that there is a ng-click attribute which accepts an expression (in this case you want to use a function) that you can attach to the element that has uib-dropdown-toggle on it.

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

You can then take the $event local that ng-click passes to the expression to stop propagation to the parent element(s).

$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;  
} 

EDIT:

According to Bootstraps Documentation, there is also an on-toggle attribute that passes the $event local as well, so this could be a more appropriate replacement for the ng-click.

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

1 Comment

You sir have been awarded some hefty upvotes! thanks it worked a treat! :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.