渲染HTML中angularJS 1.x中

我有一個指令，並I'm與IMG SRC更換IMG的URL內嵌顯示圖像渲染HTML中angularJS 1.x中

function message($filter) { 

    var directive = { 
     restrict: 'EA', 

     scope: { 
      data: '=' 
     }, 

     link: function(scope, elem, attrs) { 
      scope.data.content = scope.data.content.replace(/(https?:\/\/\S+(\.png|\.jpeg|\.jpg|\.gif))/g, "<img src='$1' alt=''>"); 
     }, 

     template: '<span>{{data.nickname}}:</span> {{data.content}}' 

    }; 

    return directive; 
}

而是看到的圖像內嵌I'm看到HTML標籤作爲我正在調查$ sce但我不確定如何在指令中使用它。

來源

2017-07-17 handsome

你更接近！您正在與ngSanitize模塊合作。

它基本上允許您在您的模板中編寫原始HTML（使用ng-bind-html指令）。你需要把它列入你的頁面，並宣佈它爲你這樣的模塊中的依賴性：

<!-- HTML --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.2/angular-sanitize.min.js"></script> 

// JavaScript 
angular.module("yourapp", ['ngSanitize']);

，然後綁定使用ng-bind-html指令，這樣在div您的HTML內容（或其他）：

template: '<span>{{data.nickname}}:</span> <div ng-bind-html="data.content"></div>'

現在，原始HTML內容data.content將被替換爲您的指令模板中的內容。這裏有一個working plunker供您參考。

來源

2017-07-24 05:31:17 31piy

所以，一個更有角度和更安全的方法是不直接將html寫入模板。相反，你可以使用大括號把圖像的URL在這樣的模板：

template: ` 
    <span>{{data.nickname}}:</span> 
    <img ng-if="{{data.hasImage}}" src="{{data.url}}" alt=""> 
`

這保留模板/數據分離。

你的方式，你把自己放在XSS的風險。爲了將生成的html放入模板中，有一個原因使得您可以跳過這些循環。如果用戶曾經能夠上傳帶有js的圖片，您的網站可能會被黑客入侵。 Angular的正常模板可以自動防止這種攻擊。

如果您需要多個圖像，可以爲數據中的每個對象添加一個url屬性，將數據數組放在範圍內，然後使用ng-repeat呈現對象數組。

來源

2017-07-28 21:10:11 frodo2975

正如你所看到的IMG標籤只有當在規定的附加圖片的一端看到一隻網址 – handsome

你說得對，我已經更新了我的答案使用創建NG-如果模板，我添加了「hasImage」屬性。我還添加了一個解釋，爲什麼最好不要在js中做html模板。 – frodo2975

渲染HTML中angularJS 1.x中

回答

相關問題