twitter popover bootstrap non funziona con angularjs

Question

Stavo cercando di usare twitter bootstrap popover sulla mia pagina web quando scopro che non funziona quando si trova sotto un <div> con ng-repeat. Funziona bene in cima a una classe div che non contiene ng- qualcuno sa perché è successo e come posso risolvere il problema?

<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

Al momento non ci sono al timore 2 progetti che hanno ottenuto le direttive popover di bootstrap per AngularJS scritti già:

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

La differenza è che http://angular-ui.github.com/bootstrap/ è originario Direttive AngularJS quindi non hai bisogno di alcuna dipendenza JavaScript di terze parti.

Entrambi i progetti sono ospitati su GitHub in modo da poter vedere le implementazioni e imparare da loro, decidere di cambiare o semplicemente utilizzare uno dei progetti.

Answer 2

Non capisco perché questa domanda sia stata sottovalutata. È un buon esempio su come comprendere il principio degli ambiti in angolare. Un ambito è fondamentalmente collegato a un elemento DOM. Tutti i controller, le ripetizioni, ecc. Funzioneranno solo in questo elemento DOM (l'ambito). Quando Boostrap crea un popover, crea un nuovo elemento DOM e lo aggiunge al corpo, quindi ora è fuori ambito (non è più nell'elemento). Questa è una caratteristica chiave per capire su Angular.

Fortunatamente Bootstrap ha la soluzione. Popover ha un'opzione container che consente di aggiungere il popover a un elemento specifico anziché a body. Metti lì il selettore jQuery dell'elemento DOM che ha il controller angolare. http://twitter.github.io/bootstrap/javascript.html#popovers (vedi Opzioni)