应用错误收集

打开菜单时，Angular重新调整动态对象的大小

时间：2016-03-22 14:51:58

标签： javascript css angularjs dom scrollbar

我正在使用动态对象（pdf）和iframe中的可折叠项目来处理angularjs项目。由于我在iframe中，因此我被限制为iframe的宽度和高度。打开可折叠时，我现在遇到一个问题，它会创建一个双滚动条。当可折叠菜单打开时，它会创建第二个滚动条:-(。我想重新调整动态对象的大小而不重新加载文档以摆脱第二个滚动条。

我已经尝试过按下可折叠按钮并按ID选择文档并重新调整高度，但这似乎不起作用。

Plunker示例HERE

这是困扰我的：

JS

angular.module('app', ['ui.bootstrap'])
.controller('CollapseController', function($scope,$sce,$document){$scope.collapsed = true;
$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.toggleCollapsed = function(){
  var temp = '';
  $scope.collapsed = !$scope.collapsed;
  if($scope.collapsed){
    $document.find('#currentDocument').height = 300;
  }else{
    $document.find('#currentDocument').height = 200;
  }
}

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

})
.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" class="document_size" id="currentDocument"></object>');
      });
   }
   };
});;

HTML / CSS

<style>
.menuBar{
  background :gray;
}

.document_size{
  width: 100%;
  height: 500px;
}
.ExampleIFRAME{
  height: 600px;
  overflow-y:auto;
}
</style>
<body ng-controller="CollapseController">
  <div class="ExampleIFRAME">
    <button class="btn btn-default" ng-click="toggleCollapsed()">Toggle</button>
    <button ng-click="changeDoc()">Change Doc</button>
    <button ng-click="changeDocAgain()">Change Again Doc</button>

    <br/><br/>
    <div collapse="collapsed">
      <div class="menuBar">
        <h1>Hello Plunker!</h1>
      </div>
    </div>
    <dynamic-object data="documentSrc"></dynamic-object>
  </div>
</body>

0 个答案:

没有答案