2016-12-02 50 views
0

我最近用JHipster創建了我的第一個項目並創建了兩個實體。 其中一個實體類似於博客。該博客有一個與textarea一起工作的內容屬性。在我blogs.html文件我啓用了我的textarea使用HTML的標籤,像這樣:HTML textarea中的內聯樣式被忽略

<div ng-bind-html="topic.content"></div> 

,如果沒有問題的作品。我能夠在我的textarea中定義html標籤,並且可以像這樣解釋。

但問題始於樣式我新形成的屬性。 一個簡單的分度,內聯樣式:

<div style="font-size:100px"> Test</div> 

被解釋爲HTML,但風格不會被跳過。 我也tryed使用NG-風格,而不是:

<div ng-style="font-size:100px"> Test</div>` 

,但沒有工作要麼。在我的樣式可能被覆蓋的情況下,我也嘗試設置!important標誌沒有成功。

對於我來說,提供實際的代碼有點困難,因爲jhipster完全自主地生成了我的實體。我無法確定某些腳本是否會覆蓋我的樣式或禁止使用樣式標籤。從來沒有少我做了一些圖片可能有助於把握的問題:

這是我的textarea用戶在其中做他輸入 this is my textarea in which the user does his input

這就是結果的外觀,注意「測試」文本應着色:

this is how the result looks, notice the "test" text should be coloured

最後但並非最不重要我儘量提供我的瀏覽器是如何解決的屬性:

how my browser resolves the attribute

我感謝您的幫助!

+0

您是否嘗試過「!important」

Test
有可能您的風格越來越重要。如果不是,那麼你能提供給我樣本嗎? – user3249448

+0

@ user3249448我已經嘗試過那個。我忘了在我的問題中提到它。謝謝 –

+0

你可以在小提琴中重新創建問題嗎?還可以在檢查該div時發佈開發工具的圖像嗎?它真的可以幫助,謝謝:) –

回答

1

我認爲消毒劑被剝離出來的風格標籤...

注入$ SCE服務在您的控制器的的trustAsHtml功能映射到視圖:

$scope.trustAsHtml = function(string) { 
    return $sce.trustAsHtml(string); 
}; 

那麼你可以做這樣的:

<div ng-bind-html="trustAsHtml(topic.content)"></div> 

這應該解決您的問題,但要知道,你的topic.content來自一個驗證源(而不是從用戶輸入),或者你可以注入攻擊...

+0

非常感謝你修復它:) –