twitter bootstrap popover不适用于angularjs

Question

我试图在我的网页上使用twitter bootstrap popover,当我发现当它放在<div>with 下面时它不起作用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>"

Answer 1

我不明白为什么这个问题被投票否决了.这是如何理解角度范围原理的一个很好的例子.范围基本上附加到DOM元素.所有控制器,重复等只能在这个DOM元素(范围)中工作.当Boostrap创建一个popover时,它会创建一个新的DOM元素并将其附加到body,所以现在它超出了范围(它不再在元素中).这是理解Angular的关键特性.

幸运的是,Bootstrap有解决方案.Popover有一个container选项,允许您将popover 追加到特定元素而不是body.放置具有角度控制器的DOM元素的jQuery选择器.http://twitter.github.io/bootstrap/javascript.html#popovers(参见选项)

Answer 2

目前至少有两个项目已经为AngularJS编写了Bootstrap的popover指令:

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

区别在于http://angular-ui.github.com/bootstrap/是原生的AngularJS指令,因此您不需要任何第三方JavaScript依赖项.

这两个项目都托管在GitHub上,因此您可以查看实现,并从中学习,决定更改或只使用其中一个项目.