Question

我正在研究角度的pdf查看器，我想在动态对象的顶部显示一个div。 div显示在每个浏览器中的对象上方，但是IE。要在此处查看此操作，请使用以下内容：http://plnkr.co/edit/MVzMvS4IwYPC8rEx5M4J?p=preview。

您会发现它在Chrome和FireFox中运行良好，但在IE中则无法运行。你能帮忙的话，我会很高兴。甚至是朝着正确方向的一点。

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$sce) {
  $scope.name = 'World';
  $scope.documentSrc = "http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf";

  $scope.frameSrc = $sce.trustAsHtml($scope.documentSrc);
  $scope.frameCode = $sce.trustAsHtml('<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" type="application/pdf"></object>');
  $scope.display = false;

  $scope.changeDoc = function(){
    $scope.documentSrc = 'https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf';
  };
  $scope.changeDocAgain = function (){
    $scope.documentSrc = 'http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf';
  };
  $scope.displayDiv = function (){
  if ( $scope.display == false){
    $scope.display = true;
  } else{
    $scope.display = false;
  }
}})

.directive('embedSrc', function () {
   return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.$watch(
          function() {
            return attrs.embedSrc;
          },
          function() {
            element.attr('src', attrs.embedSrc);
          }
  );
}
 };
})
.directive('dynamicObject', function($parse) {
return {
  restrict: 'E',
  link: function(scope, element, attrs) {
    scope.$watch(function() {
      return $parse(attrs.data)(scope);
  }, function(newValue) {
     element.html('<object data="' + newValue + '" type="application/pdf"></object>');
      });
    }
  };
});

的index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<button ng-click="changeDoc()">Change Doc</button>
<button ng-click="changeDocAgain()">Change Again Doc</button>
<br/><br/>
<button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
    Search Options
</button>  
<div ng-if="display" class="displayDiv">displayMe!</div>
<br/>  
<dynamic-object data="documentSrc"></dynamic-object>

的style.css

.displayDiv{
    position: absolute;
    background: red;
    width: 280px !important;
    z-index: 1000;
    padding:10px 10px 0px !important;
    height: 50px;
}

.pdfView{
    height: 710px;
    width :100%;
    z-index : 50;
}

以上是plunker中使用的演示代码作为示例。下面的代码就是我在项目中的代码。

.directive('objectReloadable', function ($rootScope) {
    var link = function (scope, element, attrs) {
        var currentElement = element;
        var watchFunction = function () {
            return scope.searchCriteriaService.documentSrc;
        };
        var updateHTML = function (newValue) {
            scope.searchCriteriaService.documentSrc = newValue;
            var html = '';
            if (attrs.datatype == 'pdf') {
                html = '<iframe type="application/pdf" src="' + newValue + '" class="mp-document-size" ></iframe>';
            } else if (attrs.datatype == 'html') {
                html = '<object data="' + newValue + '" type="text/html" class="mp-document-size"></object>';
            } else {
                html = '<img src="' + newValue + '" width="100%" style="overflow:scroll"/>'
            }
            var replacementElement = angular.element(html);
            currentElement.replaceWith(replacementElement);
            currentElement = replacementElement;
        };

        scope.$watch(watchFunction, function (newValue, oldValue) {
            if (newValue !== oldValue) {
                updateHTML(newValue);
            }
        });
        if (scope.searchCriteriaService.documentSrc) {
            updateHTML(scope.searchCriteriaService.documentSrc);
        }
    };
    return {
        restrict: 'E',
        scope: false,
        link: link
    };
})

Answer 1

以下是我能做的最小的工作app.js。它使用iframe和Google文档查看器工作，找到here和here。

＆＃13;

var app = angular.module('plunker', []);
    
    app.controller('MainCtrl', function($scope,$sce) {
      $scope.name = 'World';
      $scope.iframeSrc = "http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true";
      $scope.display = false;
      $scope.changeDoc = function(){
        $scope.iframeSrc = 'http://docs.google.com/gview?url=https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf&embedded=true';
      };
      $scope.changeDocAgain = function (){
        $scope.iframeSrc = 'http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true';
      };
      $scope.displayDiv = function (){
        if ( $scope.display == false){
          $scope.display = true;
        } else{
          $scope.display = false;
        }
          
      }
    })
    
    .directive('iframeSrc', function () {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          scope.$watch(
            function() {
              return attrs.iframeSrc;
            },
            function() {
              element.attr('src', attrs.iframeSrc);
            }
          );
        }
      };
    })
    .directive('dynamicObject', function($parse) {
      return {
        restrict: 'E',
        link: function(scope, element, attrs) {
    
          scope.$watch(function() {
    
            return $parse(attrs.data)(scope);
    
          }, function(newValue) {
    
            element.html('<iframe src="' + newValue + '" type="application/pdf"></iframe>');
          });
        }
      };
    });

＆＃13;

.displayDiv{
    position: absolute;
    background: red;
    width: 280px !important;
    z-index: 1000;
    padding:10px 10px 0px !important;
    height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
    <html ng-app="plunker">
    
      <head>
        <meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>AngularJS Plunker</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
        <script src="app.js"></script>
      </head>
    
      <body ng-controller="MainCtrl">
        <button ng-click="changeDoc()">Change Doc</button>
        <button ng-click="changeDocAgain()">Change Again Doc</button>
        <br/><br/>
        <button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
                    Search Options
        </button>
        <div ng-if="display" class="displayDiv">displayMe!</div>
        <br/>
        <dynamic-object data="iframeSrc"></dynamic-object>
      </body>
    
    </html>

＆＃13;

在IE中的pdf对象上的角度显示框

app.js

的index.html

的style.css

1 个答案: