angularjs expression in html <object> tag

Question

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>

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

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

I bet the object is evaluating the string before angular has a chance to replace it with the final data. — The Muffin Man
– The Muffin Man, Commented Feb 15, 2013 at 21:02

Sean Leather · Accepted Answer · 2016-07-06 16:40:33Z

35

As of AngularJS 1.1.4, you can use the ng-attr- prefix for the data attribute:

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

See the ngAttr for binding to arbitrary attributes section on AngularJS: Interpolation and data-binding.

edited Jul 6, 2016 at 16:40

answered Feb 13, 2014 at 11:10

Sean Leather

1,2421 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2339814 Over a year ago

This will not work with IE. IE will not let you change the data attribute after it has been loaded. You'll likely get a message box saying that access is denied. You should load it via a directive instead to delay the binding.

Kyle Calica-St Over a year ago

is that still the case now? I can't seem to easily google "object html element angularjs" i get a bunch of results about passing software objects and not html element objects. I'm getting strange issues with my code. Any updated answer to this or a link to docs will help thanks :)

Todd Palmer Over a year ago

This is still the case with IE 11.

snazzybouche Over a year ago

Noting that I've not had any success with this method on AngularJS 1.7.

Kees de Kooter · Accepted Answer · 2020-02-11 08:28:46Z

25

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.

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

Here this is in a fiddle.

edited Feb 11, 2020 at 8:28

Kees de Kooter

7,2135 gold badges42 silver badges47 bronze badges

answered Feb 15, 2013 at 21:51

satchmorun

12.5k2 gold badges43 silver badges27 bronze badges

2 Comments

ellier7 Over a year ago

Ran into this problem while using angular2. Any thoughts on how to use data-binding with <object> tag?

Souvik Ray Over a year ago

@satchmorun Finally this was the solution that worked for me. Indeed delaying the binding was the trick. Thanks!

Konstantin Zolin · Accepted Answer · 2019-09-11 02:01:43Z

Thank you satchmorun, but if smb want change link without reloading page or modal you can use:

<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 Jerry from this answer and example of recompile a dynamically loaded directive.

p.s. "pdfUrl" and "heightForPDF" are variable in scope

Ivan Rubinson · Accepted Answer · 2018-03-21 09:26:14Z

0

The browser tries to process the thing before AngularJS replaced the angulary expression with something the browser can work with, causing an error.

Adding an ng-cloak fixes the issue.

answered Mar 21, 2018 at 9:26

Ivan Rubinson

3,3774 gold badges25 silver badges54 bronze badges

Collectives™ on Stack Overflow

angularjs expression in html <object> tag

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related