Page tree
Skip to end of metadata
Go to start of metadata



In this section we want to implement a module bootstrapPolyfills which is composed of two sub-modules: bootstrapPolyfills.navbar and bootstrapPolyfills.form

Collapsing navbar

In bootstrap, you can have a navigation bar like this:


If you remove bootstrap.js, menu button no longer works:



To fix it, we have two solutions:

  1. Write a directive toggle which adds the exact same behaviour of bootstrap-specific attributes data-toggleand data-target.
    as you might guess it will be a directive toggle which reads the selector from data-target attribute and toggles class name specified in attribute data-toggle on the element specified by the selector, whenever directive host element is clicked.
  2. Write navbar a directive with "C" (class) as it's restrict. This directive exposes a controller with a methodToggleCollapse which can be called by other directives to toggle collapsed class on the element with class navbar-collapse inside it. This solution requires another directive navbar-toggle (again with "C" as it restirct) to handle click event and call toggleCollapse of navbar directive (if exists).

How ever both solutions are acceptable, the second solution is kind of more "automated" than the first one. In the first approach you have to add the same data-toggle and data-target attributes on menu button as in bootstrap js.

So we want to implement the second solution.

The plunk below is a good starting point. You can complete it by adding implementation of specified functions in bootstrapPollyfils.js





  • No labels