2016-04-19 10 views
0

ここでは、スコープフィールドを持つangularjsの非常に簡単な例を示します:タイトルです。HTMLマークアップを含むスコープフィールドを解析する方法

私はこのような添字的に紹介されるように、「Hello World」のあるタイトル、欲しい:問題はangularjsは、右の方法でを解析し、テキストとしてそれらを扱わないこと、であるenter image description here

をのみ。どのように私はこれを解決することができます、私は$コンパイルサービスを使用しようとし、それが正しく動作しませんでした。 javacriptの解決策が必要で、では、HTMLのディレクティブ(ng-bind-htmlなど)では必要ありません。

var app = angular.module("app",[]); 
 

 
app.controller("mainCTRL",['$scope',function($scope){ 
 
    $scope.title="Hello <sub>World</sub>"; 
 
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="mainCTRL"> 
 
    {{title}} 
 
    
 
</div>

+0

https://docs.angularjs.org/api/ng/directive/ngBindHtmlを使用する必要があります – staskus

+0

タイトルが異なる2つの部分で、意味が異なる場合はおそらく2つの異なるフィールドに含める必要があります/変数で始まります。 – CBroe

+0

私のすべての記事を読んでください、私はjavacriptソリューション – Brk

答えて

1

あなたはそれらが文字列で書かれている通り、あなたがHTML要素を挿入することができるようになる、ng-bind-htmlを使用することができます。 はここに私のコードです。 詳細はhttps://docs.angularjs.org/api/ng/directive/ngBindHtmlをご覧ください。

+0

私の投稿をすべて読んでください、私はjavascriptの解決策が必要です – Brk

+1

デフォルトでは、AngularJSはあなたにそれを許可しません。 AngularJSがどのように動作するのかは、{{...}} 'の働きです。 –

+0

私の問題の解決策はありません。私の本当の問題はキャンバス上のラベルであるため、この問題のJSソリューションが必要なので、ng-bind-htmlは使用できません。 – Brk

0

このblogは、ngBindHtmlでHTMLをレンダリングする方法を明確に理解するのに役立ちます。

+0

ngbindHTMLのようなHTMLの指示なしでjs側から要素を解析する必要があります – Brk

関連する問題