twitter bootstrap popover nie działa z angularjs

Question

Próbowałem użyć poppera bootstrap twitter na mojej stronie internetowej, gdy odkryłem, że nie działa, gdy jest umieszczony pod <div> z ng-repeat. Działa dobrze na górze w klasie div, która nie zawiera ng- czy ktoś wie dlaczego tak się stało i jak mogę obejść ten problem?

<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

Obecnie istnieją co najmniej 2 projektów, które dostali wytyczne popover Bootstrap za rok angularjs napisany już:

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

Różnica polega na tym, że http://angular-ui.github.com/bootstrap/ jest rodzimy Dyrektywy AngularJS, więc nie potrzebujesz żadnych zależności od JavaScript innych firm.

Oba projekty są hostowane na GitHub, dzięki czemu można zobaczyć wdrożenia i uczyć się na nich, zdecydować się na zmianę lub po prostu skorzystać z jednego z projektów.

Answer 2

Nie rozumiem, dlaczego to pytanie zostało odrzucone. Jest to dobry przykład na zrozumienie zasady zasięgu w kanciastym. Zakres jest w zasadzie dołączony do elementu DOM. Wszystkie kontrolery, powtórzenia itp. Będą działać tylko w tym elemencie DOM (zakres). Gdy Boostrap tworzy popover, tworzy nowy element DOM i dołącza go do ciała, więc teraz jest poza zakresem (nie jest już w tym elemencie). To kluczowa funkcja, która pozwala zrozumieć Angular.

Na szczęście Bootstrap ma rozwiązanie. Popover ma opcję container, która umożliwia dołączanie popover do konkretnego elementu zamiast do treści. Umieść tam selektor jQuery elementu DOM, który ma kontroler kątowy. http://twitter.github.io/bootstrap/javascript.html#popovers (patrz opcje)