html <object>标记</object>中的angularjs表达式

Question

我的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>显示它时，它会显示值。

Answer 1

从AngularJS 1.1.4开始，您可以使用ng-attr-前缀为data属性：

<object ng-attr-data="{{doc_details.file_url}}" type="application/pdf"></object>

请参阅AngularJS: Interpolation and data-binding上 ngAttr绑定到任意属性部分。

Answer 2

这里的问题是浏览器正在看

<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 {{1}范围的属性，直到它可用为止。）

Here this is in a fiddle

Answer 3

在AngularJS用浏览器可以处理的东西替换angulary表达式之前，浏览器会尝试处理该事物，从而导致错误。

添加ng-cloak可解决问题。

Answer 4

谢谢 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);
        }
    };
}]);

感谢您{strong> Jerry ，来自此answer和重新编译动态加载指令的示例。

p.s。 “ pdfUrl”和“ heightForPDF”的范围是可变的

Answer 5

首先需要检查响应是否为arraybuffer，如果是，则将其转换为base 64.此外，您可以使用setattribute进行分配。