Question

我尝试为小数创建一个bootstrap popover并在popover中显示该小数，这是模板：

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

目前我已经定义了这样的popover：

<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

Answer 1

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

您将获得如何显示popover的示例。

Answer 2

你的ng-bind-html =＆＃34; amount1＆＃34;在给出错误的地方使用ng-sanitize

＆＃34;错误：[$ sce：unsafe]试图在安全的环境中使用不安全的值。＆＃34;

enter image description here

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

HTML code：

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

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>

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

如何让bootstap popover工作？

2 个答案: