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

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

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

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

// 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>

помочь?

Примечание

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

2 69
angularjs html string

2 ответа:

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

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>
87

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

14