gpt4 book ai didi

javascript - Angular Bootstrap 工具提示动态内容

转载 作者:行者123 更新时间:2023-11-29 15:22:57 28 4
gpt4 key购买 nike

我正在使用 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 $ - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the uib-tooltip-template attribute option instead. The user is responsible for ensuring the content is safe to put into the 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 Loop Error

详见此处:https://stackoverflow.com/a/19370032

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

谢谢。

最佳答案

这不是您使用 uib-tooltip-html 的方式,显然它会导致无限摘要循环,幸运的是 the demo plunk向您展示如何操作。

您需要获取/计算您的 html,绑定(bind)到某个范围变量并将其绑定(bind)到 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>

如果你仍然想将一个函数绑定(bind)到你的工具提示,你可以这样做

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

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

关于javascript - Angular Bootstrap 工具提示动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42057168/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com