javascript - 对象 html 标签数据属性不适用于 IE11 中的 angularjs 绑定(bind)

Question

我有任何应用程序需要显示我在数据库中获得的网址中的文件。现在这个文件可以是图像，也可以是 pdf。所以我需要动态设置一些绑定(bind)。我在互联网上查看，对象标签看起来很有前途，但它在 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 指令

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