NG綁定，HTML不加載圖片src

我有一個簡單的介紹是這樣NG綁定，HTML不加載圖片src

<div id="{{item.id}}" ng-repeat="item in itemList"> 
     <div ng-bind-html="item.html"></div> 
</div>

的item.html包含HTML這樣的：

<a href="http://www.youtube.com"><img src="icons/youtube.png" alt="Youtube"/></a>

然而，得到的HTML不加載圖像：

<a href="http://www.youtube.com"><img alt="Youtube"/></a>

經過一番搜索，看起來像angularjs這樣做，以避免跨站點腳本，但我是ab從而直接從YouTube上加載圖像。

<a href="http://www.youtube.com"><img src="http://img.youtube.com/vi/9bZkp7q19f0/0.jpg" alt="Youtube"/></a>

此外，我能夠通過使用ng-bind-html-unsafe加載所有圖像。

<div id="{{item.id}}" ng-repeat="item in itemList"> 
     <div ng-bind-html-unsafe="item.html"></div> 
    </div>

如果我使用ng-bind-html-unsafe，我不需要ngSanitize模塊了，這意味着我的代碼不太安全？我確實使用了從外部來源加載圖像的情況。

來到我的問題：

謝謝！

2013-01-16 pkrish

沒有什麼更多要添加到你所說的。

ng-bind-html允許您在清除角色應用程序（使用$sanitise服務）後將HTML內容加載到您的角度應用程序中。另一方面，ng-bind-html-unsafe允許您加載任何HTML內容而不被清理。

清理過程包括使用衆所周知的HTML標記/元素列表檢查提供的HTML內容的每個元素。然後刪除不在列表中的任何標籤/元素。除此之外，還有一些對特定HTML屬性的更多驗證（例如src）。

在你的情況下，元素<img src="icons/youtube.png" alt="Youtube"/>沒有一個有效的src屬性，因爲它不符合AngularJS」 URI正則表達式：/^((ftp|https?):\/\/|mailto:|tel:|#)/

欲瞭解更多信息，請查看ngBindHtml，ngBindHtmlUnsafe和$sanitize（和AngularJS source code）
我相信沒有......特別是如果你不控制你正在加載的HTML。

您應該使用此指令只有ngBindHtml指令是太限制，當你絕對信任的內容您綁定到的源：由於在ngBindHtmlUnsafe文檔說明。

所以，這都是關於信任你正在加載的HTML內容的來源。在最後一種情況下，您總是可以自己處理/「清理」HTML內容，但這似乎並不容易完成，特別是如果內容是動態的。

2013-01-16 23:34:31 bmleite

我更換了URI從圖標/ youtube.png完整網址HTTP：//localhost/test/icons/youtube.png，我能夠用NG綁定，HTML。現在我注意到另一個奇怪的副作用。使用清理版本從item.html中包含的div中刪除嵌入式樣式信息。 – pkrish

查看$ sanitize文檔，看起來像這是設計。但我不明白爲什麼。 – pkrish

Nenad最近回答了這樣一個問題。通過調用$ sce.trustAsHtml（$ scope.html），您將能夠將HTML標記爲有效，以便ng-bind-html將接受它。即使img src是相對的，因此會被標記爲無效。

2013-11-11 14:44:44

回答