twitter-bootstrap twitter bootstrap popover 不适用于 angularjs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14907376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap popover doesn't work with angularjs
提问by user1166085
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?
我试图在我的网页上使用 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>"
回答by francoisrv
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.
我不明白为什么这个问题被否决了。这是如何理解 angular 作用域原理的一个很好的例子。范围基本上附加到 DOM 元素。所有的控制器、重复等只会在这个 DOM 元素（范围）中工作。当 Boostrap 创建一个 popover 时，它会创建一个新的 DOM 元素并将其附加到 body 中，所以现在它超出了范围（它不再在元素中）。这是了解 Angular 的一个关键特性。
Luckily, Bootstrap has the solution. Popover has a containeroption 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)
幸运的是，Bootstrap 有解决方案。Popover 有一个container选项，可让您将popover附加到特定元素而不是正文。将具有角度控制器的 DOM 元素的 jQuery 选择器放在那里。http://twitter.github.io/bootstrap/javascript.html#popovers（见选项）
回答by pkozlowski.opensource
At the moment there are at lest 2 projects that got Bootstrap's popover directives for AngularJS written already:
目前至少有 2 个项目已经为 AngularJS 编写了 Bootstrap 的 popover 指令：
The difference is that http://angular-ui.github.com/bootstrap/is native AngularJS directives so you don't need any 3rd party JavaScript dependencies.
不同之处在于http://angular-ui.github.com/bootstrap/是原生 AngularJS 指令，因此您不需要任何 3rd 方 JavaScript 依赖项。
Both projects are hosted on GitHub so you can see implementations and either learn from them, decide to change or just use one of the projects.
这两个项目都托管在 GitHub 上，因此您可以查看实现并从中学习、决定更改或仅使用其中一个项目。
