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

【问题标题】：angularjs expression in html <object> taghtml <object> 标记中的 angularjs 表达式
【发布时间】：2013-01-31 22:11:19
【问题描述】：

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

【问题讨论】：

我敢打赌，在 angular 有机会用最终数据替换它之前，对象正在评估字符串。
有什么解决方法吗？

标签： javascript html angularjs

【解决方案1】：

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

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

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

【讨论】：

这不适用于 IE。加载后，IE 将不允许您更改数据属性。您可能会收到一个消息框，说明访问被拒绝。您应该通过指令加载它，而不是延迟绑定。
现在还是这样吗？我似乎无法轻松地用谷歌搜索“object html element angularjs”，我得到了一堆关于传递软件对象而不是 html 元素对象的结果。我的代码出现了奇怪的问题。对此的任何更新答案或文档链接都会有所帮助，谢谢:)
IE 11 仍然是这种情况。
请注意，我在 AngularJS 1.7 上使用此方法没有取得任何成功。

【解决方案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 范围上的 src 属性，直到它变得可用）。

Here this is in a fiddle.

【讨论】：

在使用 angular2 时遇到了这个问题。关于如何使用带有
@satchmorun 最后，这是对我有用的解决方案。确实延迟绑定是诀窍。谢谢！

【解决方案3】：

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

感谢 answer 中的 Jerry 以及重新编译动态加载指令的示例。

附言“pdfUrl”和“heightForPDF”在范围内是可变的

【讨论】：

【解决方案4】：

在 AngularJS 将 angulary 表达式替换为浏览器可以使用的内容之前，浏览器会尝试处理该内容，从而导致错误。

添加ng-cloak 可以解决此问题。

【讨论】：