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

Question

我有一个像$scope.doc_details我的angularjs控制器中的范围,我想用它来显示一个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上的ngAttrfor binding to any attributes部分:插值和数据绑定.

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在src对scope属性,直到它成为可用).

这是一个小提琴.