html <object>标签中的angularjs表达式
html <object>标签中的angularjs表达式
提问于 2013-02-16 04:50:27
我在我的angularjs控制器中有一个像$scope.doc_details这样的作用域，我想用它通过一个标签来显示一个pdf文件，如下所示：
<object data="{{doc_details.file_url}}" type="application/pdf"></object>但它没有加载到浏览器中，在我的chrome控制台中，我看到的是：
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost/%7B%7Bdoc_details.file_url%7D%7D当我使用<span>{{doc_details.file_url}}</span>显示它时，它会显示它的值。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-16 05:51:49
这里的问题是浏览器看到
<object data="{{doc_details.file_url}}" type="application/pdf"></object>在Angular编译它之前在DOM中，显然{{doc_details.file_url}}不是一个有效的URL。
在这里，指令可以成为您的朋友。
假设我们想要这样写：
<pdf src='doc_details.file_url'></pdf>我们可以创建一个指令：
app.directive('pdf', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var url = scope.$eval(attrs.src);
element.replaceWith('<object type="application/pdf" data="' + url + '"></object>');
}
};
});这将推迟object元素的创建，直到我们从作用域实际获得可用的URL (假设它已经存在-否则，您需要在作用域上$watch src属性，直到它变为可用)。
Stack Overflow用户
发布于 2018-03-21 17:26:14
浏览器尝试在AngularJS用浏览器可以处理的内容替换角度表达式之前处理该内容，从而导致错误。
添加ng-cloak可解决此问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14903112
复制相关文章
相似问题