如何 compile/add HTML inside md-tooltip

Question

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

不使用 ng-bind-html，工具提示输出：
Some html card.

有了它，我的 HTML 输出为字符串：
Some html card

在我的控制器中，我使用这个自定义过滤器来编译在 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&lt;br&gt;&lt;strong&gt;card&lt;/strong&gt;';
})

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

如何 compile/add HTML inside md-tooltip

How to compile/add HTML inside md-tooltip

html

json

angularjs

angularjs-ng-repeat

angularjs-material