Object html tag data attribute not working with angularjs binding in IE11

Question

I got any application where I need to display file from urls I got in database. Now this file can be an image and it can be a pdf. So I need to set some binding dynamically. I looked on internet and object tag looked promising but it is not working in IE11. It is working fine in Chrome and Firefox. SO that is why I am asking here for help.

I have created a directive just to make sure If we have to do any dom manipulation. Here goes my directive code.

mainApp.directive("displayFile", function () {

    return {
        restrict: 'AE', // only activate on element attribute
        scope: {
            displayFile: "=",
            fileType:"="
        },
        link: function (scope, elem, attrs) {
            scope.filePath = "";
            var element = angular.element(elem);
            // observe the other value and re-validate on change
            scope.$watch('displayFile', function (val) {
                if (val !== "") {
                    scope.filePath = val;
                    scope.type="application/"+ fileType;
                    //element.attr("data", scope.filePath)
                }
            });
        },
        template: '<object data="{{filePath}}" type="{{type}}">'
    }
});

My html for directive

<div data-display-pdf="fileUrl" file-type="type"></div>

Attaching an image also for IE and Chrome/FF output enter image description here

Above image is a comparison between IE and FF

IE expects slightly different parameters in an object tag. Might take a moment to track those down... — Tieson T.
– Tieson T., Commented Aug 27, 2014 at 4:21
Might be easier to use a plugin like jquery.malsup.com/media - otherwise, I'd assume you could look at the source for that to see how he generates the appropriate element properties. — Tieson T.
– Tieson T., Commented Aug 27, 2014 at 4:32

Atul Chaudhary · Accepted Answer · 2014-08-27 05:37:12Z

Final cut of directive which is working on IE11, Chrome and Firefox

use it like

  <div data-display-file="fileObject"></div>

where fileObject is like

$scope.fileObject = {
            fileUrl: "",
            type: ""
        }

mainApp.directive("displayFile", function () {

    var updateElem = function (element) {
        return function (displayFile) {
            element.empty();

            var objectElem = {}
            if (displayFile && displayFile.type !== "") {
                if (displayFile.type === "pdf") {
                    objectElem = angular.element(document.createElement("object"));
                    objectElem.attr("data", displayFile.fileUrl);
                    objectElem.attr("type", "application/pdf");
                }
                else {
                    objectElem = angular.element(document.createElement("img"));
                    objectElem.attr("src", displayFile.fileUrl);
                }
            }
            element.append(objectElem);
        };
    };

    return {
        restrict: "EA",
        scope: {
            displayFile: "="
        },
        link: function (scope, element) {
            scope.$watch("displayFile", updateElem (element));
        }
    };
});

Collectives™ on Stack Overflow

Object html tag data attribute not working with angularjs binding in IE11

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related