2016-08-12 8 views
0

データベースからロードされたのの配列があります。各オブジェクトには、のhtmlコンテンツを持つ特定のキーがあります。角度jsのデータベースから読み込まれたhtmlデータの印刷

他のすべてのものに沿ってこれらのコンテンツを私のビューに表示したいと思います。私はng-html-bindを使用しました。私のコントローラには$sceの依存関係がありました。もし私がそこに<h1>Trusted html</h1>のような文字列を入れたら、それは動作します。しかし私の内容ではない。

私が本当に望むのは、$scope.htmlContent = $sce.trustAsHtml(data.content);のような内容を入れて、これらがすべて自分の所属しているビューで1つずつループすることです。しかし、それは動作しません。

私も別の配列を作成しましたが、これらのコンテンツのすべてを単独でプッシュしましたが、$sce.trustAsHtml(trustMe);に何か問題が起こります。

----------------------------------- EDIT ---------- -------------------------------

これらは私のオブジェクトは、次のとおりです。

[Object, Object, Object, Object, Object, Object, Object, Object, Object] 

: 
Object 
8 
: 
Object 
$$hashKey 
: 
"object:22" 
content 
: 
"<h2>Test data.</h2> 
↵" 
created_at 
: 
"2016-08-12 14:12:35" 
id 
: 
9 
name 
: 
"Test" 
points 
: 
4 
semester 
: 
"Eagle Nest" 
semester_id 
: 
6 
status 
: 
0 
subject 
: 
"Android" 
subject_id 
: 
6 
updated_at 
: 
"2016-08-12 14:12:35" 
user_id 
: 
1 
__proto__ 
: 

マイビュー

<div class="panel panel-default" ng-repeat="quiz in quizzes"> 
       <div class="panel-body"> 
       @ quiz.semester @ <span class="pull-right">Subject: @ quiz.subject @ </span> 
       <hr class="blur-line"> 
       <p class="list-group-item-text list-item"> 
       <i class="fa fa-long-arrow-right"></i> @ quiz.name @ 
       </p> 
       <p class="details" ng-bind-html="MytrustedHtml"></p> 

       </div> 
      </div> 

コントローラ

$scope.MytrustedHtml = $sce.trustAsHtml(data.content); 
+2

で、あなたの項目に 'NG-repeat'を使用していない理由は、何らかの理由?ここで私は通常それを行う方法の例です:https://jsfiddle.net/ahmadabdul3/hp8sbzwf/25/ –

+0

多分あなたはコードを共有することができますか? Jsfiddleはすばらしいでしょう –

+0

これはJSONオブジェクトの配列か、オブジェクトの配列ですか?また、ng-html-bindは存在せず、ng-bind-htmlは存在しません。 – mguimard

答えて

0

これを管理するには、フィルタが適している場合があります。

.filter('rawHtml', ["$sce", function($sce) { 
    return function(input) { 
     return $sce.trustAsHtml(input); 
    }; 
}]); 

とマークアップ

<p ng-bind-html="MytrustedHtml | rawHtml"></p> 
+0

ありがとうございます。出来た。 –

関連する問題