Currently, I am developing a cart application in Angular and utilizing Angular Bootstrap.
The main requirement is to display a tooltip when hovering over the cart icon, with the content of the tooltip changing based on whether the item is already in the cart or not.
Here is the snippet of HTML code:
<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>Essentially, I need the tooltip text to be determined by a function that checks if the item is in the cart. According to the documentation, this can be achieved using trusted HTML.
The documentation states,
uib-tooltip-html- Accepts an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is necessary, consider using the uib-tooltip-template attribute option instead. It is the responsibility of the user to ensure the content is safe for DOM insertion!
My itemtooltiptext() function looks like this:
$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!");
}
}
This implementation leads to an
Infinite $digest Loop Error
Referencing this discussion here:
However, my query is how to handle dynamic text scenarios using functions while avoiding this error. Should I switch to a template? I am uncertain how templates would address this issue effectively since I still require variable text from the template... Can anyone provide a solution?
Thank you.