twitter bootstrap popover 不适用于 angularjs [英] twitter bootstrap popover doesn't work with angularjs

问题描述

我试图在我的网页上使用 twitter bootstrap popover，当我发现当它被放置在带有 ng-repeat<div> 下方时它不起作用>.它在不包含 ng- 的 div 类的顶部工作正常，有谁知道为什么会发生这种情况，我该如何解决这个问题?

I was trying to use twitter bootstrap popover on my webpage when I discover that it doesn't work when it is placed below a <div> with ng-repeat. It works fine at the top within a div class that doesn't contain ng- does anyone know why did it happen and how can I work around the issue?

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

推荐答案

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

I don't see why this question got down-voted. It's a good example on how to understand the principle of scopes in angular. A scope is basically attached to a DOM element. All the controllers, repeats, etc. will only work in this DOM element (the scope). When Boostrap creates a popover, it creates a new DOM element and appends it to body, so now it's out of the scope (it is not in the element any more). That's a key feature to understand about Angular.

幸运的是，Bootstrap 有解决方案.Popover 有一个 container 选项，可让您将 popover 附加到特定元素而不是正文.将具有角度控制器的 DOM 元素的 jQuery 选择器放在那里.http://twitter.github.io/bootstrap/javascript.html#popovers(见选项)

Luckily, Bootstrap has the solution. Popover has a container option that lets you append the popover to a specific element instead of body. Put there the jQuery selector of the DOM element that has the angular controller. http://twitter.github.io/bootstrap/javascript.html#popovers (see Options)

这篇关于twitter bootstrap popover 不适用于 angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！