如何在 md-tooltip 中编译/添加 HTML

Question

我正在尝试在 md-tooltip 中添加 HTML，但没有任何运气，即使使用 ng-bind-html。

不使用 ng-bind-html，工具提示输出：
Some html<br> <strong>card</strong>。

有了它，我的 HTML 输出为字符串：
Some html<br><strong>card</strong>

在我的控制器中，我使用这个自定义过滤器来编译在 ng-repeat 中使用的 HTML：

app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

此过滤器成功地适用于工具提示以外的其他元素。

工具提示写成：

<md-tooltip md-delay="1000" md-direction="bottom" class="tooltip-sort-display">
    <span ng-bind-html="categoryItem.ToolTip | unsafe">
</md-tooltip>

请注意，当我不使用 json 变量而是将静态文本添加到工具提示时，HTML 渲染没有问题

<md-tooltip md-delay="1000" md-direction="bottom" class="tooltip-sort-display">
    <strong>Tool</strong><br><em>tip</em>
</md-tooltip>

关于如何完成这项工作的任何想法？我会举一个例子，但我的 Angular 技能并不是那么先进。我主要是靠同事的工作做前端开发。

Answer 1

在您的情况下，您的问题是您使用的是 HTML 特殊字符。如果没有，您的代码将正常工作。无论如何，如果您无法避免收到特殊字符，您可以在过滤器中添加解码：

JSFIDDLE DEMO

.filter('unsafeSpecial', function($sce) {
  return function(value) {
    var txt = document.createElement("textarea");
    txt.innerHTML = value;
    return $sce.trustAsHtml(txt.value);
  }
})

你可以这样使用：

HTML

<md-tooltip>
  <span ng-bind-html="msg | unsafeSpecial"></span>
</md-tooltip>

控制器

.controller('mainCtrl', function($scope) {
  $scope.msg = 'Some html<br><strong>card</strong>';
})

---

有关 decode html 主题的更多信息，如果需要，请检查此问题： HTML Entity Decode