Question

在我的angularJs应用程序中，我使用bootstrap popover并且存在将控制器数据绑定到popover内容的问题。下面是我的代码。

            <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}}绑定到popover的数据内容。

Answer 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

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

如何将angularjs控制器数据绑定到bootstrap popover

2 个答案: