twitter bootstrap popover doesn't work with angularjs

Question

I was trying to use twitter bootstrap popover on my webpage when I discover that it doesn't work when it is placed below a <div> with ng-repeat. It works fine at the top within a div class that doesn't contain ng- does anyone know why did it happen and how can I work around the issue?

<h3>Students Without Team</h3>
 <div class="accordion" id="studentNoTeamAccordion" >
         <a href="#" class="btn btn-large btn-primary" rel="popover"data-html="true"
            data-content="
               <form>
                   <textarea class='input-xlarge' rows='12' type='text'></textarea>  
                   <P>
                      <input class='btn btn-primary' type='submit' value='Send' />
               </form>"
            data-placement="right" data-original-title="Enquiries">Send Enquiries
        </a>
  <div class="accordion-group" ng-repeat="(key,val) in stud_finding"><
      <a href="#" class="btn btn-large btn-primary" rel="popover"data-html="true"
         data-content="
               <form>
                   <textarea class='input-xlarge' rows='12' type='text'></textarea> 
                   <P>
                       <input class='btn btn-primary' type='submit' value='Send' />
               </form>"

Solution 1

I don't see why this question got down-voted. It's a good example on how to understand the principle of scopes in angular. A scope is basically attached to a DOM element. All the controllers, repeats, etc. will only work in this DOM element (the scope). When Boostrap creates a popover, it creates a new DOM element and appends it to body, so now it's out of the scope (it is not in the element any more). That's a key feature to understand about Angular.

Luckily, Bootstrap has the solution. Popover has a container option that lets you append the popover to a specific element instead of body. Put there the jQuery selector of the DOM element that has the angular controller. http://twitter.github.io/bootstrap/javascript.html#popovers (see Options)

Solution 2

At the moment there are at lest 2 projects that got Bootstrap's popover directives for AngularJS written already:

• http://angular-ui.github.com/bootstrap/
• http://mgcrea.github.com/angular-strap/

The difference is that http://angular-ui.github.com/bootstrap/ is native AngularJS directives so you don't need any 3rd party JavaScript dependencies.

Both projects are hosted on GitHub so you can see implementations and either learn from them, decide to change or just use one of the projects.

Comments

[user1166085]

would it interfere with twitter bootstrap?

[Richard]

both projects demo popover with older versions of angular. when you test modern angular code like 1.0.6 or 1.1.4 it stops working. Popover and tooltip are useless unless they add partial template options.

[pkozlowski.opensource]

@Richard I'm not sure what you mean by "stops working" since at least directives from angular-ui.github.com/bootstrap are working fine with the latest AngularJS: plnkr.co/edit/FECkoAJgSbBVFdvzk6mx?p=preview

[Richard]

@pkozlowski.opensource your example is a tooltip, not popover. popover is not working. (works: h and this one... (does not work: jsfiddle.net/tvAhW/ttp://jsfiddle.net/msgilligan/UYjkK)

[pkozlowski.opensource]

@Richard Hmmm, Popovers seem to work as well with 1.1.4: plnkr.co/edit/FIfvbix2JIMIOwlH5w1M?p=preview

[Richard]

@pkozlowski.opensource your code works on plunker but does not work on jfiddle

[pkozlowski.opensource]

@Richard the example in your fiddle has nothing to do with code examples I was showing in plunker. My point was that directives from angular-ui.github.com/bootstrap work without problems with the latest AngularJS, since you were claiming otherwise.