如何在md-tooltip

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

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

---

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