2014-12-02 130 views
1

我想保存一個div對象的內部作爲一些json對象內的html,保存它,然後接收它作爲json,並有html能當被放置在一個div內時,它被用作普通的html。保存(轉義?)HTML並在json對象中使用它

因此,這裏是我的嘗試

$scope.contentHere = [ 
{ 
    'size' : '', 
    'title' : 'Utility Alerts', 
    'content' : '<div>test 1</div>', 
    'help' : 'Help Text Here', 
    'launch' : true, 
    'share' : true, 
    'mobile' : true 

}, 
{ 
    'size' : 'w3', 
    'title' : 'Graph', 
    'content' : '&lt;nvd3-stacked-area-chart data=&quot;exampleData&quot; id=&quot;exampleId&quot; showXAxis=&quot;true&quot; showYAxis=&quot;true&quot; showControls=&quot;true&quot; width=&quot;700&quot; height=&quot;200&quot;&gt; &lt;svg&gt;&lt;/svg&gt; &lt;/nvd3-stacked-area-chart&gt;', 
    'help' : 'Help Text Here', 
    'launch' : true, 
    'share' : true, 
    'mobile' : true 

}]; 

我想一個正常,一個完全逃出來的,似乎都只是呈現爲頁面上的普通文本。 我有他們在重複,我試圖顯示HTML像這樣 -

<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" > 
      <div class="handle"><h5 ng-style="{ 'color' : themeHere.h1 }>{{widget.title}}</h5></div> 
       {{widget.content}} 

    </div> 

希望得到任何幫助!謝謝閱讀。

回答

2

你將不得不告訴角度來像這樣的內容爲HTML綁定:

<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" > 
    <div class="handle"><h5 ng-style="{ 'color' : themeHere.h1 }>{{widget.title}}</h5></div> 
    <div ng-bind-html="widget.content"></div> 
</div> 

然而,由於1.2,角附帶$ SCE啓用,這意味着你必須明確地告訴角度,你相信HTML像這樣:

// You will have to inject $sce in your controller. 
$scope.contentHere = $scope.contentHere.map(function(entry){ 
    entry.content = $sce.trustAsHtml(entry.content); 
    return entry; 
}); 

而且,不知道這是否只是一個複製粘貼的問題,但在你的數組中的第二個對象,內容是在HTML實體編碼,你會想在適當的,未編碼,HTML那裏。

0

您應該將html推入具有唯一標識符的$ templateCache,然後使用ng-include從視圖中包含該模板。

或者,您可以製作自定義指令,該指令將加載html並將其作爲鏈接函數的一部分綁定到指令。