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>"
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)