web-dev-qa-db-fra.com

AngularJS: Insérer du HTML à partir d'une chaîne

J'ai beaucoup cherché, mais je ne trouve pas la réponse ou je ne la comprends pas. Un exemple spécifique remportera le vote =)

  • J'ai une fonction qui retourne une chaîne HTML.
  • Je ne peux pas changer la fonction.
  • Je veux que le code HTML représenté par la chaîne soit inséré dans le DOM.
  • Je suis heureux d'utiliser un contrôleur, une directive, un service ou toute autre chose qui fonctionne (et qui constitue une bonne pratique).
  • Disclaimer: Je ne comprends pas bien compiler.

Voici ce que j'ai essayé:

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

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

Ça n'a pas marché.

Je l'ai essayé aussi comme directive:

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

Aidez-moi?

Remarque

Je les ai regardés, entre autres, mais je n'ai pas réussi à le faire fonctionner.

htmlstringangularjs
73
Sir Robert

Regardez l'exemple dans ce lien:

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

Fondamentalement, angular a une directive pour insérer du HTML dans des pages. Dans votre cas, vous pouvez insérer le HTML en utilisant la directive ng-bind-html de la manière suivante:

Si vous avez déjà fait tout cela:

// 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"];

Ensuite, dans votre code HTML dans le cadre de ce contrôleur, vous pouvez

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

vous pouvez aussi utiliser $sce.trustAsHtml('"<h1>" + str + "</h1>"') si vous voulez en savoir plus, veuillez vous référer à $ sce

15
Dang