如何将angularjs控制器数据绑定到引导弹出窗口
[英]how to bind angularjs controller data to bootstrap popover
问题描述
In my angularJs app, i am using bootstrap popover and having problem of binding controller data to content of popover. 
在我的angularJs应用程序中，我正在使用引导弹出窗口，并且遇到将控制器数据绑定到弹出窗口的内容的问题。 below is my code. 下面是我的代码。
<ul>
<li ng-repeat="rpt in obj.reports track by rpt.name">
{{rpt.name}}
<span class="glyphicon glyphicon-info-sign"
data-toggle="popover" data-trigger="hover"
title="Driver reports" data-content="rpt.info" popover>
</span>
</li>
</ul>
Please help me how to bind {{rpt.info}} to data-content of popover. 请帮助我如何将{{rpt.info}}绑定到popover的数据内容。
2 个解决方案
解决方案1
0 2016-07-06 15:23:27
So for making bootstrap work with angular, you could use one of these awesome modules. 因此，要使bootstrap与angular一起使用，您可以使用以下出色的模块之一。
Angular Strap or Angular UI Boostrap Angular表带或Angular UI Boostrap
Angular Strap's modal: 角带的模态：
http://mgcrea.github.io/angular-strap/#/modals http://mgcrea.github.io/angular-strap/#/modals
Angular UI's modal: Angular UI的模式：
https://angular-ui.github.io/bootstrap/#/modal https://angular-ui.github.io/bootstrap/#/modal
解决方案2
0 2016-07-06 15:48:36
I would use UI Bootstrap ( https://angular-ui.github.io/bootstrap/#/top ) since it is an Angular app. 我会使用UI Bootstrap（ https://angular-ui.github.io/bootstrap/#/top ），因为它是Angular应用程序。 Here's your code using UI Bootstrap: 这是使用UI Bootstrap的代码：
var app = angular.module('popoverApp', ['ui.bootstrap']); app.controller('MainCtrl', function() { var vm = this; this.reports = [{ name: 'Report 1', info: 'this is report 1' }, { name: 'Report 2', info: 'this is report 2' }, { name: 'Report 3', info: 'this is report 3' }]; });
<!DOCTYPE html> <html ng-app="popoverApp"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl as obj"> <ul> <li ng-repeat="rpt in obj.reports track by rpt.name"> {{rpt.name}} <div class="glyphicon glyphicon-info-sign" uib-popover="{{rpt.info}}" popover-trigger="mouseenter" popover-title="Driver reports" popover-placement="right"> </div> </li> </ul> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.