Month: December 2015

Dropdown and Popover services in AngularStrap

As per a previous post, I have been using AngularStrap to combine the strength of AngularJS with the beauty of Bootstrap widgets. I think it is fair to say that it has not been a smooth ride. Part of the reason is the API docs for AngularStrap are far from complete or even correct.

Today, I was trying to incorporate a dropdown (a context menu, really) and ran into a case where the documentation does not show how exactly to use the $dropdown service (to launch the popup from the controller).

Looking at the source, I found that there is a show() method similar to other services in their collection. However, this did not quite work and I ended up with a runtime error:

TypeError: Cannot read property ‘link’ of undefined

Googling around I found this plunk that supposedly showed the correct way of using the $dropdown service. However, this did not help my situation and I was left with the same error.

Scratching my head some more and looking around, I found this post about using the $popover service, which works in the same way as the $dropdown one. It suggested that $promise has to be used rather than just calling show() directly. It was unclear what $promise exactly is, and again looking at the source for the tooltip module, which is the “base” for the dropdown module, it turns be a property computed from the Angular compilation of bootstrap content. Looking further, the $bsCompiler module does a bunch of stuff with the template asynchronously (using the $q service). So that was the explanation for why I needed to show the dropdown in this way:

dropdown.$promise.then(function () {
    dropdown.show();
});
This did work and my dropdown (context menu) did show and work properly.