web-dev-qa-db-ja.com

Angular-htmlで文字列を補間します

だから私は次のような「テンプレート文字列」を持っています：

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

補間したい名前は変数内です。だから私はこのように進めました：

var miniScope = {
 name: "Chuck"
};

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

これは機能します。次に、名前をboldにしたいと思います。私は明らかに試しました：

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

しかし、htmlコードはエスケープされます。どうすればこれを達成できますか？

PS：なぜテンプレートに文字列を入れないのかと不思議に思う方のために、テンプレートの文字列がサーバーからのものであるからです。

angularjsstring-interpolation
10
MonsieurNinja

この Plunkr は、「こんにちは私の名前はChuck」を期待どおりに出力します。 JavaScriptは質問から変更されていません。

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);
}

そして、あなたのHTMLでは、ng-bind-htmlは、HTMLがエンコードされないようにします。

  <body ng-controller="TestCtrl">
    <div ng-bind-html="sentence"></div>
  </body>
12
Kevin Hakanson

このディレクティブを使用して、文字列からコンテンツをコンパイルします。

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

必要な場合は、$ sceを使用して信頼できるHTMLをコンパイルします Angular $ sce doc

しかし、これらすべてはangular way実際にはありません。いくつかの異なるパーシャルを使用し、ng-includeディレクティブでインクルードする必要があります。

1
Vladimir Gordienko