如何让引导弹出窗口工作？答案

【问题标题】：how to get bootstap popover to work?如何让引导弹出窗口工作？
【发布时间】：2015-07-14 11:49:10
【问题描述】：

我尝试为小数创建一个引导弹出框并在弹出框中显示该小数，这是模板：

<span
     ng-bind-html="amount1">
</span>

目前我已经像这样定义了我的弹出框：

<h1 popover-template="myPopoverTemplate.html" popover-trigger="mouseenter" ng-bind-html="amount1"></h1>
<h1 popover-template="'myPopoverTemplate.html'" popover-trigger="mouseenter" ng-bind-html="amount2"></h1>

是否可以对 2 个金额使用相同的弹出框模板？

plunker:http://plnkr.co/edit/hJI6u4yo2DLqUhsyWFe5?p=preview

【问题讨论】：

查看新编辑的答案和插件

标签： angularjs twitter-bootstrap-3 popover

【解决方案1】：

您的 ng-bind-html="amount1" 出现问题，在出现错误的地方使用 ng-sanitize

“错误：[$sce:unsafe] 尝试在安全上下文中使用不安全值。”

我了解您的问题，您想使用相同的模板在弹出框的数量 1 和数量 2 上显示数量 1，这是您的解决方案

HTML 代码：

 <body ng-app="ui.bootstrap.demo">

  <div ng-controller="PopoverDemoCtrl">
    <br>
    <br>
    <br>

    <br>
    <br>
    <br>

&nbsp; &nbsp;
   <span popover-template="'myPopoverTemplate.html'" popover-trigger="mouseenter" ng-bind-html="amount1" ng-mouseenter="flag=true"> </span>
    <span popover-template="'myPopoverTemplate.html'" popover-trigger="mouseenter" ng-bind-html="amount2" ng-mouseenter="flag=false"> </span>

  </div>
</body>

角度代码：

angular.module('ui.bootstrap.demo', ['ui.bootstrap','ngSanitize']);
angular.module('ui.bootstrap.demo', ['ui.bootstrap','ngSanitize']).controller('PopoverDemoCtrl', function ($scope) {
  $scope.amount1 ='10000';
  $scope.amount2 ='20000';
});

模板代码：

<span ng-if='flag' ng-bind-html="amount1">

</span>
<span ng-if='flag === false' ng-bind-html='amount2'>
  </span>

解决方案：http://plnkr.co/edit/wxZ3H1yjkMKvUldq8Ccv?p=preview （新Plunker）

【讨论】：

我还是想用 ng-bind-html
修复了这个 sanitize 问题
查看新答案，缺少 ng-sanitize 依赖项，并且其文件丢失了 watch new editor plunker
看看问题有 2 个数量，我想知道是否可以通过以某种方式传入数量来使用相同的 popovertemplate。
这意味着你想在同一个模板中使用数量1和数量2？？

【解决方案2】：

请参考：https://angular-ui.github.io/bootstrap/

您将获得如何显示弹出框的示例。

【讨论】：

我想使用相同的模板，即当鼠标悬停在amount1上时在popover中显示amount1，当悬停在amount2上时显示amount2。