AngularJS PDF 查看器在 IE 中不起作用答案

【问题标题】：AngularJS PDF viewer not working in IEAngularJS PDF 查看器在 IE 中不起作用
【发布时间】：2015-11-12 19:58:39
【问题描述】：

我正在尝试显示基于 agularjs 变量的 url 的 PDF。我让它适用于谷歌浏览器，但它似乎不适用于 IE。我已经尝试将 url 硬编码到页面中，并且效果很好。这是显示我的结果的 plunker：http://plnkr.co/edit/gFfGQCzAfmf2zf5C2Bpc?p=preview

请注意，查看我的问题的唯一方法是在 IE 中使用 plunker 而不是 Chrome。而且我的 IE 和 Adobe 都是最新的。

我的理论是，Adobe 将 url 作为 {{documentSrc}} 启动，然后 angular 运行并将该变量替换为该值，然后 Adobe 永远不会识别它。这是真的？如果是这样，我该如何解决这个问题？如果不是，那是怎么回事？

代码

<object data="{{documentSrc}}" type="application/pdf" width="100%" height="700px"></object>

【问题讨论】：

你试过用ng-attr-data代替data吗？
在 IE 中收到拒绝访问警报。
这些资源是否托管在同一个域中？
他们正在通过一个位于同一服务器上的 api。我确信这不是浏览器的预检问题。
您使用的是哪个版本的 IE，以及在哪个版本的 Windows 上？

标签： javascript angularjs internet-explorer pdf

【解决方案1】：

对对象元素使用指令。您将需要创建一个监视来检测数据和类型绑定的变化。如果您打算多次更改绑定，则需要跟踪指令元素还有一个额外的问题。

请看这里：http://embed.plnkr.co/fFtkcG/preview

 <object-reloadable>No document selected</object-reloadable>

.directive('objectReloadable', function() {
  var link = function(scope, element, attrs) { 
    var currentElement = element;

    scope.$watch('documentSrc', function(newValue, oldValue) {
      if (newValue !== oldValue) {
        scope.documentSrc = newValue;
        var html = '<object type="application/pdf" data="' + newValue + '"></object>';
        var replacementElement = angular.element(html);
        currentElement.replaceWith(replacementElement);
        currentElement = replacementElement;
      }
    });
  };

  return {
    restrict: 'E',
     scope: false,
    link: link
  };  
})

【讨论】：