だから私は次のような「テンプレート文字列」を持っています:
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:なぜテンプレートに文字列を入れないのかと不思議に思う方のために、テンプレートの文字列がサーバーからのものであるからです。
この 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>
このディレクティブを使用して、文字列からコンテンツをコンパイルします。
.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ディレクティブでインクルードする必要があります。