html中的angularjs表达式<object>标签 [英] angularjs expression in html <object> tag

问题描述

我的 angularjs 控制器中有一个类似于 $scope.doc_details 的范围，我想用它通过使用标签来显示 pdf 文件，如下所示:

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:

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

但它没有在浏览器中加载，在我的 chrome 控制台中，我看到的是:

but it doesn't get loaded in the browser, in my chrome console, all I see is:

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> 显示它时，它会显示值.

and when I just display it using <span>{{doc_details.file_url}}</span> it show the value.

推荐答案

这里的问题是浏览器看不到

The problem here is that the browser is seeing

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

在 Angular 编译之前的 DOM 中，显然 {{doc_details.file_url}} 不是有效的 URL.

in the DOM before Angular compiles it, and obviously {{doc_details.file_url}} isn't a valid URL.

指令可以成为您的朋友.

Directives can be your friend here.

假设我们要写:

<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>');
        }
    };
});

这将推迟 object 元素的创建，直到我们真正从作用域中获得了可用的 URL(假设它已经存在 - 否则你会想要 $watch 作用域上的 src 属性，直到它变得可用).

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).

这是一个小问题.

这篇关于html中的angularjs表达式<object>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！