Navbar not collapsing without ui-bootstrap

[Kageetai]

Hey,

I just tried out the generator and noticed after some changes to the generated project, that the navbar is not collapsing. It seems the directive "collapse" is missing or at least I cannot find it. Am I missing something here?

[Kageetai]

Ah btw, even after going back to my very first commit without any changes to the generated code, the navbar is not working.

[kingcody]

Did you include ui-bootstrap? If not, there is a good chance that the bootstrap vendor script has already fired off before the navbar was loaded. If you're not using bootstrap-ui, you'll need to manually initialize the collapse behavior. Check out the docs for more info on collapse and how to initialize it.

Let me know if that does the trick.

[Kageetai]

Okay, I tried it out with two clean installs, one with ui-bootstrap and one without. With ui-bootstrap included in the build, it works fine. I'll try to manually run the collapse script, but I would be good to fix the generator too or at least notify new users somewhere, wouldn't it?

[kingcody]

I'm not sure what the right course of action is, but I do know this is typical behavior with asynchronous page loading, ie: DOM gets added after document.ready.

[kingcody]

Actually, the proper thing to do would be write a directive for the behavior.
In simplest form:

angular.module('YOUR_APP_NAME')
  .directive('navbarCollapse', function () {
    return function postLink(scope, element) {
      var nav = element.find('.navbar-collapse').collapse();
      element.find('button.navbar-toggle').click(function() { nav.collapse('toggle'); });
    };
  });

Then just place the navbar-collapse attribute on the div.navbar.navbar-default element.

[JaKXz]

Great answer @kingcody.

[Kageetai]

Thanks for the answer!

[tmeani]

+1

[Kageetai]

Hi again,
I finally got to try out @kingcody s code and also had to include bootstrap.js in wiredep like in #565. One change to you code though: I removed the first collapse otherwise the navbar would stark opened.

[raosushant]

Depending on your version of UI-Bootstrap you might have to modify

collapse='nav.isCollapsed'
to
uib-collapse ='nav.isCollapsed'
in navbar.html