twitter-bootstrap - modal - ui-bootstrap-tpls

Twitter Bootstrap Popover no funciona con angularjs

Question

Estaba intentando usar la opción de arranque de Twitter en mi página web cuando descubro que no funciona cuando se coloca debajo de <div> con ng-repeat . Funciona bien en la parte superior dentro de una clase div que no contiene ng- ¿Alguien sabe por qué sucedió y cómo puedo ng- el 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

En este momento hay al menos 2 proyectos que ya tienen escritas las directivas emergentes de Bootstrap para AngularJS:

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

La diferencia es que http://angular-ui.github.com/bootstrap/ son las directivas de AngularJS nativas, por lo que no necesita ninguna dependencia de JavaScript de terceros.

Ambos proyectos están alojados en GitHub para que pueda ver implementaciones y aprender de ellos, decidir cambiar o simplemente usar uno de los proyectos.

Answer 2

No veo por qué esta pregunta fue rechazada. Es un buen ejemplo de cómo entender el principio de los ámbitos en angular. Un ámbito se adjunta básicamente a un elemento DOM. Todos los controladores, repeticiones, etc. solo funcionarán en este elemento DOM (el alcance). Cuando Boostrap crea una ventana emergente, crea un nuevo elemento DOM y lo agrega al cuerpo, por lo que ahora está fuera del alcance (ya no está en el elemento). Esa es una característica clave para entender acerca de Angular.

Por suerte, Bootstrap tiene la solución. Popover tiene una opción de container que le permite agregar la ventana emergente a un elemento específico en lugar de un cuerpo. Coloque allí el selector jQuery del elemento DOM que tiene el controlador angular. http://twitter.github.io/bootstrap/javascript.html#popovers (ver Opciones)