Javascript html <object> 标签中的 angularjs 表达式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14903112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs expression in html <object> tag
提问by AT_
I have a scope like $scope.doc_detailsin my angularjs controller, and I want to use it to display a pdf file by using a tag, like this:
我有一个类似于$scope.doc_detailsangularjs 控制器的范围，我想用它通过使用标签来显示 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>它显示它时，它会显示值。
回答by Sean Leather
As of AngularJS 1.1.4, you can use the ng-attr-prefix for the dataattribute:
从AngularJS 1.1.4 开始，您可以使用属性的ng-attr-前缀data：
<object ng-attr-data="{{doc_details.file_url}}" type="application/pdf"></object>
See the ngAttrfor binding to arbitrary attributessection on AngularJS: Interpolation and data-binding.
回答by satchmorun
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 objectelement until we actually have the URL available to us from the scope (assuming it's already there - otherwise you'd want to $watchthe srcattribute on the scope until it became available).
这将推迟的创作object元素，直到我们实际上已经从范围提供给我们的网址（假设它已经存在-否则，你会希望$watch在src对scope属性，直到它成为可用）。
回答by Константин Золин
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 Jerryfrom this answerand example of recompile a dynamically loaded directive.
感谢Jerry从这个答案和重新编译动态加载指令的示例。
p.s. "pdfUrl" and "heightForPDF" are variable in scope
ps "pdfUrl" 和 "heightForPDF" 在范围内是可变的
回答by Ivan Rubinson
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-cloakfixes the issue.
添加一个ng-cloak修复了这个问题。
回答by pallavnav
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.
您首先需要检查响应是否为数组缓冲区，如果是，则将其转换为 base 64。您也可以使用 setattribute 进行分配。
