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

【问题标题】：Object html tag data attribute not working with angularjs binding in IE11对象 html 标记数据属性不适用于 IE11 中的 angularjs 绑定
【发布时间】：2014-10-20 13:08:53
【问题描述】：

我有任何应用程序需要从我在数据库中获得的 url 显示文件。现在这个文件可以是图像，也可以是 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 指令

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

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

上图是IE和FF的对比

【问题讨论】：

我本可以使用 iframe，但这不是这里的选择
IE 期望对象标签中的参数略有不同。可能需要一点时间来追踪这些...
可能更容易使用像jquery.malsup.com/media 这样的插件 - 否则，我假设您可以查看源代码以了解他如何生成适当的元素属性。

标签： javascript jquery html angularjs

【解决方案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));
        }
    };
});

【讨论】：