角度ブートストラップツールチップ動的コンテンツ

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!"); 
    } 
} 

ここに詳述されているようにこれは

無限$ダイジェストループ誤差

になります：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では、私はこのようにそれをアクセス：私はそうは以下のように計算された値をキャッシュする機能を作成// plnkr：

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