Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Directives may not be linked by angular.bootstrap in dynamically loaded HTML #1335

aalcock opened this Issue Sep 4, 2012 · 3 comments


None yet
3 participants

aalcock commented Sep 4, 2012

I have an application based on AngularJS 1.0.1 and Bootstrap 2.0.2.

The application dynamically loads views; I use angular.bootstrap() to compile and link these fragments, and AngularJS is appears to be working fine, linking to my model and responding to events.

I want to put a Bootstrap tooltip on some dynamic elements, and have created a directive for this (using the approach laid out by AlexFigueiredoo at http://jsfiddle.net/AlexFigueiredoo/cRr9K/4/). This approach works well when the AngularJS view is on static HTML as you can see from the jsFiddle.

However, when the same code is used in an environment where the HTML is dynamically loaded, the popup is not working. Investigating, the 'tooltip' directive is now not being linked.

I have a test-case on jsFiddle at http://jsfiddle.net/aalcock/hFGb7/10/. Do bring up your JS console to view the messages.

Note that console.log never shows the directive factory being called, let alone linked.

aalcock commented Sep 4, 2012

I have asked the community on StackExchange if there is a fix/workround: http://stackoverflow.com/q/12259963/1395668

i added the tooltip attribute to the end of the tag and it worked for me. looks like you forgot the directive on the live example?



mhevery commented Sep 4, 2012

Unfortunately that is not how the code is intended to work.

  1. you can't use angular.bootstrap to load child pages, since that creates a whole new application which is not linked to the parent. You should be using ng-view or ng-include.
  2. you can not use bootstrap code with angular out of the box. you need to wrap it in a directive.

We can't make what you want work, since the browser does not give us enough hooks to know when the DOM was changes by someone other then angular.

@mhevery mhevery closed this Sep 4, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment