Bootstrap popover 在 AngularJs ng-repeat 中不起作用 [英] Bootstrap popover not working inside AngularJs ng-repeat
问题描述
我有一个国家/地区列表，我正在使用 ng-repeat 填充这些列表，一切正常.另外，我试图通过使用引导弹出窗口显示每个国家/地区的其他一些细节，但它似乎不起作用，所以有人可以帮助我吗?
HTML 代码:
<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">国家</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="这是Popover 的 <b>body</b> data-original-title="Creativity Tuts">pop</a></div>Javascript 代码:
var app = angular.module("app", []);app.controller('my_controller', function($scope) {$scope.all_countries = [{"id":28,"title":"瑞典"},{"id":56,"title":"USA"},{"id":89,"title":"英格兰"}];});函数 deleteCountry(id){alert("做点什么");}$(document).ready(function () {$("a[rel=popover]").popover({ 位置: '底部', html: 'true' }).click(功能(e){e.preventDefault();});});请参考这个JsFiddle
Demo: http://jsfiddle.net/5ww8e/1/
创建一个名为 bs-popover 的新指令，并将其与 ng-repeat 一起应用.在 bs-popover 指令中触发 popover 方法.
另外你的js文件加载顺序错误，你应该在bootstrap之前加载jquery.
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?
Html Code:
<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:
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
Demo: http://jsfiddle.net/5ww8e/1/
Create a new directive called bs-popover and apply it together with ng-repeat. Trigger popover method inside bs-popover directive.
Also your js file loading order is wrong, you should load jquery before bootstrap.
这篇关于Bootstrap popover 在 AngularJs ng-repeat 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
