[英]angularjs expression in html <object> tag
我的 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>
显示它时,它会显示值。
从AngularJS 1.1.4 开始,您可以对data
属性使用ng-attr-
前缀:
<object ng-attr-data="{{doc_details.file_url}}" type="application/pdf"></object>
这里的问题是浏览器看到的
<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
属性直到它变得可用)。
谢谢satchmorun ,但如果 smb 想要更改链接而不重新加载页面或模式,您可以使用:
<pdf2 src="pdfUrl" height="heightForPDF"></pdf2>
这个指令:
app.directive('pdf2', ['$compile', function ($compile) {
return {
restrict: 'E',
scope: {
src: "=",
height: "="
},
link: function (scope, element, attr) {
function update(url) {
element.html('<object data="' + url + '" type="application/pdf" width="100%" style="height: ' + scope.height + 'px">' +
'Для просмотра pdf:<br /> Для Internet Explorer установите <a target="_blank" href="http://get.adobe.com/reader/">Acrobat Reader</a><br />' +
'Для Chrome: <a target="_blank" href="https://support.google.com/chrome/answer/6213030?hl=ru">Проверьте настройки</a>' +
'</object>');
$compile(element.contents())(scope);
}
scope.$watch('src', update);
}
};
}]);
感谢Jerry从这个答案和重新编译动态加载指令的示例。
ps "pdfUrl" 和 "heightForPDF" 在范围内是可变的
浏览器尝试在 AngularJS 用浏览器可以使用的东西替换 angulary 表达式之前处理这个东西,从而导致错误。
添加ng-cloak
解决了这个问题。
首先需要检查响应是否为arraybuffer,如果是,则将其转换为base 64.此外,您可以使用setattribute进行分配。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.