Question

我试图在我的网页上使用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>"

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

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

不同之处在于http://angular-ui.github.com/bootstrap/是本机AngularJS指令，因此您不需要任何第三方JavaScript依赖项。

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

twitter bootstrap popover不适用于angularjs

2 个答案: