Как скомпилировать / добавить HTML внутри md-подсказки - PullRequest
Новая
       21

Как скомпилировать / добавить HTML внутри md-подсказки

0 голосов
/ 02 октября 2018

Я пытаюсь добавить HTML в md-tooltip , но мне не повезло, даже с ng-bind-html.

Без использования ng-bind-html,всплывающая подсказка выводит:
Some html<br> <strong>card</strong>.
enter image description here

С ним мой HTML выводится в виде строки:
Some html<br><strong>card</strong>
enter image description here

В моем контроллере я использую этот пользовательский фильтр для компиляции HTML, используемого в ng-repeat: 

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>


enter image description here

Любые идеи о том, как я могу сделать эту работу?Я бы собрал пример, но мои навыки Angular не настолько развиты.В основном я занимаюсь разработкой внешнего интерфейса на основе работы моих коллег.

1 Ответ

0 голосов
/ 03 октября 2018

В вашем случае ваша проблема в том, что вы используете специальные символы 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
...