Angular Bootstrap 工具提示动态内容

Question

我正在使用Angular Bootstrap在 Angular 中制作购物车应用程序。

将鼠标悬停在购物车图标上时，应该会出现一个工具提示。工具提示的内容应根据商品是否已在购物车中而变化。

所以，这是 html：

<h3><i class="fa fa-shopping-basket" ng-click="add2Cart(item.Name)" tooltip-placement="right" uib-tooltip-html="itemtooltiptext(item.Name)" aria-hidden="true"></i></h3>

基本上，为了检查该商品是否已在购物车中，我希望从函数中解析工具提示文本。我从文档中了解到，只要 HTML 是可信的，就支持这一点。

它说，

uib-tooltip-html$ - 采用计算结果为 HTML 字符串的表达式。请注意，此 HTML 未编译。如果需要编译，请改用 uib-tooltip-template 属性选项。用户有责任确保内容可以安全地放入 DOM！

所以我的itemtooltiptext()功能是...

  $scope.itemtooltiptext = function(name) {
  if (localStorage.getItem("cart") === null) {
    return $sce.trustAsHtml("Add " + name + " to Cart!");
  } else {
    var cart = JSON.parse(localStorage.getItem("cart"));
    for (var i = 0; i < cart.length; i++) {
      if (cart[i] == name) {
        console.log("already in cart");
        return $sce.trustAsHtml(name + "already in Cart!");
      }
    }
    return $sce.trustAsHtml("Add " + name + " to Cart!");
  }
}   

这导致

无限 $digest 循环错误

详细信息如下： https: //stackoverflow.com/a/19370032

但问题是我需要它来自具有各种条件的函数吗？那么我应该使用模板吗？我不明白这将如何更好地工作，因为我仍然需要从模板提供动态文本......那么解决方案是什么？

谢谢。

Answer 1

这不是你使用的方式uib-tooltip-html，显然它会导致无限摘要循环，幸运的是演示plunk向你展示了如何做到这一点。

您需要获取/计算您的html，绑定到某个范围变量并将其绑定到uib-tooltip-html

js

$scope.itemtooltiptext = function() {
    $scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
};
$scope.itemtooltiptext();

html

<button uib-tooltip-html="htmlTooltip" class="btn btn-default">Tooltip</button>

如果您仍然想将函数绑定到工具提示，您可以这样做

<button uib-tooltip="{{itemtooltiptext()}}" class="btn btn-default">Tooltip</button>

请注意，此方法将在每个摘要周期调用该函数。