Twitter bootstrap popover не работает с angularjs

Я пытался использовать twitter bootstrap popover на моей веб-странице, когда обнаружил, что он не работает, когда он помещен ниже <div> с ng-repeat. Он отлично работает в верхней части в классе div, который не содержит ng- Кто-нибудь знает, почему это произошло, и как я могу обойти проблему?

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

Ответы

Ответ 1

Я не понимаю, почему этот вопрос ушел - проголосовали. Это хороший пример того, как понять принцип областей в angular. Область действия в основном привязана к элементу DOM. Все контроллеры, повторы и т.д. Будут работать только в этом элементе DOM (область действия). Когда Boostrap создает popover, он создает новый элемент DOM и добавляет его в тело, поэтому теперь он выходит из области действия (он больше не находится в элементе). Это ключевая функция для понимания angular.

К счастью, у Bootstrap есть решение. У Popover есть опция container, которая позволяет добавлять popover к определенному элементу вместо тела. Поместите туда селектор jQuery элемента DOM с контроллером angular. http://twitter.github.io/bootstrap/javascript.html#popovers (см. Параметры)

Ответ 2

В настоящий момент есть 2 проекта, которые уже получили инструкции по настройке Bootstrap для AngularJS:

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

Отличие состоит в том, что http://angular-ui.github.com/bootstrap/ - это собственные директивы AngularJS, поэтому вам не нужны зависимые от сторонних зависимостей JavaScript.

Оба проекта размещены на GitHub, поэтому вы можете видеть реализации и учиться у них, решать изменить или просто использовать один из проектов.