这篇博客探讨了在Angular中创建自定义`img`指令以确保图片源为安全URL的问题。通过检查`src`属性并修正不安全的链接，实现了对图片源的保护。同时，为了解决递归问题并处理动态加载的HTML内容，作者提供了`dynamic`指令，用于编译动态内容。文章还提到了如何避免使用`img`作为指令名，并鼓励读者分享改进方案。
尽管讨论了创建img指令是否明智，解决问题的实际指令如下所示：
app.directive('img', function() {
return {
restrict: 'E',
replace: false,
link: function(scope, elem, attr) {
if (attr.src.slice(0, 7) !== "http://" && attr.src.slice(0, 8) !== "https://") {
attr.$set("src", "http://demo.com/+ attr.src);
}
}
};
});
此评论中讨论的递归问题来自于尝试使用模板替换整个标记而不是仅仅更改src值
此外，为了将指令应用于动态加载的html代码段，需要将它包装在编译其内容的指令中：
app.directive('dynamic', function($compile) {
return {
restrict: 'A',
replace: false,
transclude: true,
link: function(scope, ele, attrs) {
return scope.$watch(attrs.dynamic, function(html) {
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
});
像这样应用：
其中content是范围中的变量，其中包含使用标签剪切的动态html。
如果你想避免一个名为img的指令，一种方法是“修复”这个片段：
content.replace(/
然后像这样启动指令：
app.directive('customimg', function() {
return {
restrict: 'A',
...
在这里使用替换似乎相当粗糙，但我想不出另一种方式。 欢迎提出改善答案的建议！
扫一扫
3204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
