Angular - Interpolation string mit html

So, ich habe ein "template Strings", die so aussieht:

var templateString = "Hello my name is {{name}}";

Den Namen, die ich interpolieren ist eine variable. Also ging ich auf diese Weise:

var miniScope = {
 name: "Chuck"
};

var sentence = $interpolate(templateString)(miniScope);
/* sentence: "Hello my name is Chuck" */

Dieser funktioniert. Jetzt würde ich gerne Fett den Namen. Ich habe es natürlich ausprobiert:

var miniScope = {
 name: "<strong>Chuck</strong>"
};

Aber der html-code wird escaped. Irgendeine Idee, wie ich diese erreichen können?

PS: Für diejenigen von Euch, die sich Fragen, warum ich nicht einfach den string in der Vorlage, ist es, weil meine Vorlage Zeichenfolge, die vom server kommt.

InformationsquelleAutor MonsieurNinja | 2014-12-04
  1. 12

    Diese Plunkr Ausgänge "Hallo, mein name ist Chuck" als erwartet. Der JavaScript-Code ist unverändert aus der Frage.

    var app = angular.module("app", ["ngSanitize"]);
app.controller("TestCtrl", TestCtrl);
function TestCtrl($scope, $interpolate) {
  var templateString = "Hello my name is {{name}}";

  var miniScope = {
    name: "<strong>Chuck</strong>"
  };

  $scope.sentence = $interpolate(templateString)(miniScope);
}

    Und in Ihrem HTML-Code vornehmen Verwendung Sie verwenden ng-bind-html zu halten, die HTML aus, das kodiert wird.

      <body ng-controller="TestCtrl">
    <div ng-bind-html="sentence"></div>
  </body>
    • ist ng-bind-html arbeitet mit angular2 ?
    • Nein, ng-bind-html funktioniert nicht in den Winkel-2. Sie benötigen [innerHTML] wie bereits in dieser beantworten.
    InformationsquelleAutor Kevin Hakanson
  2. 1

    verwenden Sie diese Richtlinie, um zu kompilieren Zeug aus dem string.

    .directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
    scope.$watch(
        function(scope) {
            return scope.$eval(attrs.compile);
        },
        function(value) {
            element.html(value);
            $compile(element.contents())(scope);
        }
    );
};
}])


$scope.name = "Vladimir";
$scope.str = "Hello my name is <strong>{{name}}</strong>";


<div compile="str"></div>

    und verwenden, $sce zu kompilieren Vertrauenswürdige html wenn Sie brauchen, Eckig $sce doc

    aber alle diese Dinge nicht eckig Weise Umgekehrt ist, müssen Sie einige verschiedene Teiltöne, und schließen Sie ihn mit ng-include-Direktive.

    • Ich eigentlich am Ende machen das auf ganz unterschiedliche Art und Weise. Ich lasse den post, falls dies jemandem hilft. Vielen Dank für Ihre Antwort
    InformationsquelleAutor Vladimir Gordienko
Schreibe einen Kommentar