对象html标记数据属性不适用于IE11中的angularjs绑定

Question

我有任何应用程序需要显示我在数据库中获取的文件中的文件。现在这个文件可以是一个图像，它可以是一个PDF格式。所以我需要动态设置一些绑定。我看着互联网和对象标签看起来很有希望，但它在IE11中无效。它在Chrome和Firefox中运行良好。这就是我在这里寻求帮助的原因。

我已经创建了一个指令，以确保我们必须进行任何dom操作。这是我的指令代码。

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

我的html for directive

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

也为IE和Chrome / FF输出附加图像

上图是IE和FF之间的比较

Answer 1

最终削减了适用于IE11，Chrome和Firefox的指令

像

一样使用它

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

其中fileObject就像

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