渲染HTML中angularJS 1.x中

Question

我有一个指令，并I'm与IMG SRC更换IMG的URL内嵌显示图像

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但我不确定如何在指令中使用它。

Answer 1

你更接近！您正在与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供您参考。

Answer 2

所以，一个更有角度和更安全的方法是不直接将html写入模板。相反，你可以使用大括号把图像的URL在这样的模板：

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

这保留模板/数据分离。

你的方式，你把自己放在XSS的风险。为了将生成的html放入模板中，有一个原因使得您可以跳过这些循环。如果用户曾经能够上传带有js的图片，您的网站可能会被黑客入侵。 Angular的正常模板可以自动防止这种攻击。

如果您需要多个图像，可以为数据中的每个对象添加一个url属性，将数据数组放在范围内，然后使用ng-repeat呈现对象数组。