AngularJS: Вставка HTML из строки

Я посмотрел LOT для этого, но я либо не могу найти ответ, либо я его не понимаю. Определенный пример выиграет голосование =)

У меня есть функция, которая возвращает строку HTML.
Я не могу изменить функцию.
Я хочу, чтобы html, представленный строкой, был вставлен в DOM.
Я рад использовать контроллер, директиву, службу или что-то еще, что работает (и это разумная практика).
Отказ от ответственности: я плохо разбираюсь в компиляции $.

Вот что я пробовал:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

function Ctrl ($scope, $compile) {
  $scope.htmlString = htmlString;
}
Ctrl.$inject = ["$scope", "$compile"];

Это не сработало.

Я тоже пробовал это как директиву:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

angular.module("myApp.directives", [])
  .directive("htmlString", function () {
    return {
      restrict: "E",
      scope: { content: "@" },
      template: "{{ htmlStr(content) }}"
    }
  });

  ... and in my HTML ...

  <html-string content="foo"></html-string>

Справка

Примечание

Я смотрел на них, среди прочего, но не мог заставить его работать.

Ответ 1

Посмотрите пример в этой ссылке:

http://docs.angularjs.org/api/ngSanitize.$sanitize

В принципе, angular имеет директиву для вставки html в страницы. В вашем случае вы можете вставить html, используя директиву ng-bind-html, например:

Если вы уже сделали все это:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

function Ctrl ($scope) {
  var str = "HELLO!";
  $scope.htmlString = htmlString(str);
}
Ctrl.$inject = ["$scope"];

Затем в вашем html в рамках этого контроллера вы можете

<div ng-bind-html="htmlString"></div>

Ответ 2

вы также можете использовать $sce.trustAsHtml('"<h1>" + str + "</h1>"'), если хотите узнать более подробно, обратитесь к $sce