[英]angularjs expression in html <object> tag
I have a scope like $scope.doc_details
in my angularjs controller, and I want to use it to display a pdf file by using a tag, like this:我的 angularjs 控制器中有一个类似于
$scope.doc_details
的范围,我想用它来通过使用标签来显示 pdf 文件,如下所示:
<object data="{{doc_details.file_url}}" type="application/pdf"></object>
but it doesn't get loaded in the browser, in my chrome console, all I see is:但它没有加载到浏览器中,在我的 chrome 控制台中,我看到的是:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost/%7B%7Bdoc_details.file_url%7D%7D
and when I just display it using <span>{{doc_details.file_url}}</span>
it show the value.当我使用
<span>{{doc_details.file_url}}</span>
显示它时,它会显示值。
As of AngularJS 1.1.4 , you can use the ng-attr-
prefix for the data
attribute:从AngularJS 1.1.4 开始,您可以对
data
属性使用ng-attr-
前缀:
<object ng-attr-data="{{doc_details.file_url}}" type="application/pdf"></object>
See the ngAttr
for binding to arbitrary attributes section on AngularJS: Interpolation and data-binding .请参阅
ngAttr
以绑定到AngularJS上的任意属性部分:插值和数据绑定。
The problem here is that the browser is seeing这里的问题是浏览器看到的
<object data="{{doc_details.file_url}}" type="application/pdf"></object>
in the DOM before Angular compiles it, and obviously {{doc_details.file_url}}
isn't a valid URL.在 Angular 编译它之前的 DOM 中,显然
{{doc_details.file_url}}
不是一个有效的 URL。
Directives can be your friend here.指令在这里可以成为您的朋友。
Say we want to write:假设我们要写:
<pdf src='doc_details.file_url'></pdf>
We can create a directive:我们可以创建一个指令:
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>');
}
};
});
This will defer the creation of the object
element until we actually have the URL available to us from the scope (assuming it's already there - otherwise you'd want to $watch
the src
attribute on the scope until it became available).这将推迟
object
元素的创建,直到我们确实从范围中获得了可用的 URL(假设它已经存在 - 否则您希望$watch
范围上的src
属性直到它变得可用)。
Thank you satchmorun , but if smb want change link without reloading page or modal you can use:谢谢satchmorun ,但如果 smb 想要更改链接而不重新加载页面或模式,您可以使用:
<pdf2 src="pdfUrl" height="heightForPDF"></pdf2>
And this directive:这个指令:
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);
}
};
}]);
Thank you Jerry from this answer and example of recompile a dynamically loaded directive.感谢Jerry从这个答案和重新编译动态加载指令的示例。
ps "pdfUrl" and "heightForPDF" are variable in scope ps "pdfUrl" 和 "heightForPDF" 在范围内是可变的
The browser tries to process the thing before AngularJS replaced the angulary expression with something the browser can work with, causing an error.浏览器尝试在 AngularJS 用浏览器可以使用的东西替换 angulary 表达式之前处理这个东西,从而导致错误。
Adding an ng-cloak
fixes the issue.添加
ng-cloak
解决了这个问题。
You first need to check if the response is an arraybuffer, if it is, convert it to base 64. Also you can use setattribute to assign. 首先需要检查响应是否为arraybuffer,如果是,则将其转换为base 64.此外,您可以使用setattribute进行分配。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.