如何将 angularjs 控制器数据绑定到引导弹出窗口答案

【问题标题】：how to bind angularjs controller data to bootstrap popover如何将 angularjs 控制器数据绑定到引导弹出窗口
【发布时间】：2016-07-06 15:08:13
【问题描述】：

在我的 angularJs 应用程序中，我正在使用引导弹出框并且遇到将控制器数据绑定到弹出框内容的问题。下面是我的代码。

            <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>

请帮助我如何将 {{rpt.info}} 绑定到弹出框的数据内容。

【问题讨论】：

标签： angularjs twitter-bootstrap binding popover

【解决方案1】：

因此，为了使引导程序与 Angular 一起工作，您可以使用这些很棒的模块之一。

Angular Strap 或者 Angular UI Boostrap

Angular Strap 的模态：
http://mgcrea.github.io/angular-strap/#/modals

Angular UI 的模态：
https://angular-ui.github.io/bootstrap/#/modal

【讨论】：

【解决方案2】：

我会使用 UI Bootstrap (https://angular-ui.github.io/bootstrap/#/top)，因为它是一个 Angular 应用程序。这是您使用 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>

【讨论】：

不客气。请将此标记为正确答案，以便其他人知道它已被回答。