Angular Bootstrap工具提示动态内容

时间:2017-02-05 20:54:03

标签: javascript angularjs angular-ui-bootstrap

我正在使用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!");
  }
}   

这导致

  

Infinite $ digest循环错误

详情如下:https://stackoverflow.com/a/19370032

但问题是我需要它来自具有各种条件的功能吗?我应该使用模板吗?我不明白这样做会有什么效果,因为我仍然需要从模板中提供动态文本......那么解决方案是什么?

谢谢。

2 个答案:

答案 0 :(得分:1)

这不是您使用uib-tooltip-html的方式,显然它会导致无限的摘要循环,幸运的是the demo 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>

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

答案 1 :(得分:0)

我遇到了这个无限的摘要周期问题,我需要一个动态的工具提示...它导致角度每次重新计算它作为一个新值(即使它是相同的)。我创建了一个函数来缓存计算值,如下所示:

$ctrl.myObj = {
    Title: 'my title',
    A: 'first part of dynamic toolip',
    B: 'second part of dynamic tooltip',
    C: 'some other value',
    getTooltip: function () {
        // cache the tooltip
        var obj = this;
        var tooltip = '<strong>A: </strong>' + obj.A + '<br><strong>B: </strong>' + obj.B;
        var $tooltip = {
            raw: tooltip,
            trusted: $sce.trustAsHtml(tooltip)
        };
        if (!obj.$tooltip) obj.$tooltip = $tooltip;
        else if (obj.$tooltip.raw !== tooltip) obj.$tooltip = $tooltip;
        return obj.$tooltip;
    }
};

然后在html中,我这样访问它:

<input type="text" ng-model="$ctrl.myObj.C"
    uib-tooltip-html="$ctrl.myObj.getTooltip().trusted">