Javascript 在angularJS 1.x中呈现HTML

我有一个指令，我用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;
}

功能消息（$filter）{
var指令={
限制：“EA”，
范围：{
数据：'='
},
链接：功能（范围、要素、属性）{
scope.data.content=scope.data.content.replace（/（https？：\/\/\/\S+（\.png\.jpeg\.jpg\.gif））/g，“”；
},
模板：“{data.nickname}}:{{data.content}”
};
返回指令；
}

---

但是，我没有看到内嵌的图像，而是将HTML标记看作文本，我正在调查$sce，但我不知道如何在指令中使用它。

你更接近了！。关于使用模块，您是对的

它基本上允许您在模板中编写原始HTML（使用

ngbindhtml

指令）。您需要将其包含在页面中，并在模块中将其声明为依赖项，如下所示：

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

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

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

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

---

现在，

data.content

的原始HTML内容将替换为指令模板中的内容。这里有一个供您参考的方法。

因此，一个更具角度和安全性的方法是不要直接将html写入模板。相反，您可以使用花括号将图像url放入模板中，如下所示：

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

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

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

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

模板：`
{{data.nickname}}：
`

这将保留模板/数据分离

按照你的方式，你将自己置于XSS的风险中。angular之所以让您跳转，是为了将生成的html放入模板中。如果用户能够在url中上传带有js的图像，您的站点可能会被黑客攻击。Angular的正常模板自动防止此类攻击

---

如果需要多个图像，您可以将url属性添加到数据中的每个对象，将数据数组放在作用域上，然后使用ng repeat呈现对象数组。

正如您所见，只有当url以定义的图像扩展之一结尾时，才会创建标记img。您是对的，我已经更新了我的答案，在模板中使用ng if，并添加了一个“hasImage”属性。我还解释了为什么最好不要在js中自己做html模板。