本文介绍了引导酥料饼不AngularJs NG重复内部组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个国家名单,我填充那些使用NG-重复,一切工作正常。此外,我试图通过引导酥料饼,以显示每一个国家内部的其他一些细节,它似乎并没有工作所以能有人帮帮我吗?

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:

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:

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();
        });
});

请参阅此

推荐答案

演示:

创建一个名为 BS-酥料饼新指令和一起应用它NG-重复。触发酥料饼 BS-酥料饼里面方式指令。

Create a new directive called bs-popover and apply it together with ng-repeat. Trigger popover method inside bs-popover directive.

此外,您的js文件的加载顺序是不对的,你应该引导加载之前jQuery的。

Also your js file loading order is wrong, you should load jquery before bootstrap.

这篇关于引导酥料饼不AngularJs NG重复内部组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-19 23:09