current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

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 outputenter image description here

Above image is a comparison between IE and FF

share|improve this question
    
I could'h have used iframe but that is not an option here –  Atul Chaudhary Aug 27 '14 at 4:19
    
IE expects slightly different parameters in an object tag. Might take a moment to track those down... –  Tieson T. Aug 27 '14 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. Aug 27 '14 at 4:32

1 Answer 1

up vote 1 down vote accepted

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));
        }
    };
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.