twitter-bootstrap Bootstrap popover 在 AngularJs ng-repeat 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20894104/
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
Bootstrap popover not working inside AngularJs ng-repeat
提问by user972255
I have a countries list and I am populating those using ng-repeat, everything is working fine. Also, I am trying to show some other details inside each country by using the bootstrap popover and it doesn't seem to work so can someone please help me?
我有一个国家/地区列表，我正在使用 ng-repeat 填充那些列表，一切正常。另外，我试图通过使用引导弹出窗口显示每个国家/地区的其他一些细节，但它似乎不起作用，所以有人可以帮助我吗？
Html Code:
html代码：
<body ng-app="app" ng-controller="my_controller">
<div class="span3 projectCard" ng-repeat="country in all_countries">
<div class="projectCardHeight">
<button class="btn close cardClose" ng-click="deleteCountry(country.id)">×</button>
<div class="cardHeader">Country</div>
<div class="cardBody">{{country.id}}</div>
<div class="cardBody">{{country.title}}</div>
<div class="cardBody"><a href="#" id="pop{{country.id}}" class="btn btn-primary" rel="popover" data-content="This is the <b>body</b> of Popover" data-original-title="Creativity Tuts">pop</a></div>
</div>
</div>
</body>
Javascript Code:
Javascript代码：
var app = angular.module("app", []);
app.controller('my_controller', function($scope) {
$scope.all_countries = [
{"id":28,"title":"Sweden"},
{"id":56,"title":"USA"},
{"id":89,"title":"England"}];
});
function deleteCountry(id)
{
alert("Do something");
}
$(document).ready(function () {
$("a[rel=popover]")
.popover({ placement: 'bottom', html: 'true' })
.click(function (e) {
e.preventDefault();
});
});
Please refer to this JsFiddle
请参考这个JsFiddle
回答by Daiwei
Demo: http://jsfiddle.net/5ww8e/1/
演示：http: //jsfiddle.net/5ww8e/1/
Create a new directive called bs-popoverand apply it together with ng-repeat. Trigger popovermethod inside bs-popoverdirective.
创建一个名为的新指令bs-popover并将其与ng-repeat. 指令popover内的触发方法bs-popover。
Also your js file loading order is wrong, you should load jquery before bootstrap.
另外你的js文件加载顺序是错误的，你应该在bootstrap之前加载jquery。
