如何让 bootstrap popover 工作？

Question

我试图为小数创建一个 bootstrap 弹出窗口并在弹出窗口中显示该小数，这是模板：

<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 个金额使用相同的弹出窗口模板？

笨蛋：http://plnkr.co/edit/hJI6u4yo2DLqUhsyWFe5?p=preview

Answer 1

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

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

Answer 2

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

"Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context."

我理解你的问题，你想使用相同的模板在 popover 的 amount1 和 amount2 的 popover 上显示 amount1，这是你的解决方案

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代码：

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）

如何让 bootstrap popover 工作？

how to get bootstap popover to work?

popover

angularjs

twitter-bootstrap-3