twitter bootstrap popover funktioniert nicht mit angularjs

Question

Ich habe versucht, Twitter Bootstrap Popover auf meiner Webseite zu verwenden, wenn ich feststelle, dass es nicht funktioniert, wenn es unter <div> mit ng-repeat platziert wird. Es funktioniert gut an der Spitze innerhalb einer Div-Klasse, die nicht enthält ng- weiß jemand, warum es passiert ist und wie kann ich das Problem umgehen?

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

Answer 1

Im Moment gibt es an, damit zwei Projekte, die bereits für AngularJS geschrieben Bootstrap der popover Richtlinien bekam:

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

Der Unterschied besteht darin, dass http://angular-ui.github.com/bootstrap/ stammt AngularJS-Direktiven, so dass Sie keine JavaScript-Abhängigkeiten von Drittanbietern benötigen.

Beide Projekte werden auf GitHub gehostet, so dass Sie Implementierungen sehen und entweder von ihnen lernen, entscheiden können, eines der Projekte zu ändern oder eines zu verwenden.

Answer 2

Ich sehe nicht, warum diese Frage abgelehnt wurde. Es ist ein gutes Beispiel dafür, wie man das Prinzip von Winkeln im Winkel verstehen kann. Ein Bereich ist grundsätzlich an ein DOM-Element gebunden. Alle Controller, Wiederholungen usw. funktionieren nur in diesem DOM-Element (dem Bereich). Wenn Boostrap ein Popover erstellt, erstellt es ein neues DOM-Element und hängt es an den Körper an, so dass es nun außerhalb des Bereichs liegt (es ist nicht mehr im Element). Das ist ein Schlüsselmerkmal zum Verständnis von Angular.

Glücklicherweise hat Bootstrap die Lösung. Popover verfügt über die Option container, mit der Sie das Popover an ein bestimmtes Element anstelle von body anhängen können. Setzen Sie dort den jQuery-Selektor des DOM-Elements, das den Winkelregler hat. http://twitter.github.io/bootstrap/javascript.html#popovers (siehe Optionen)