Угловая бутстрап Подсказка Динамический контент

Question

Я делаю приложение для тележки в Угловом, используя Angular Bootstrap.

При наведении указателя мыши на значок корзины должна появиться всплывающая подсказка. Содержимое всплывающей подсказки должно изменяться в зависимости от того, находится ли элемент в корзине или нет.

Итак, вот 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!"); 
    } 
} 

Это приводит к ошибке

Бесконечные $ дайджеста Loop

Как подробно описано здесь: https://stackoverflow.com/a/19370032

Но проблема в том, что мне нужно, чтобы она исходила от функции с различными условиями? Так должен ли я использовать шаблон? Я не понимаю, как это будет работать лучше, потому что мне по-прежнему нужен динамический текст из шаблона ... так что же такое решение?

спасибо.

Answer 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> 

Обратите внимание, что этот подход будет иметь функцию, вызванную каждый цикл дайджеста.

Answer 2

Я столкнулся с этой бесконечной проблемой цикла дайджеста, где мне нужна динамическая подсказка ... она заставила угловато пересчитать ее каждый раз как новое значение (хотя это и было то же самое).Я создал функцию для кэширования вычисленного значения, как так:

$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">