I am working on a pdf viewer in angular and I want to display a div on top of a dynamic object. The div displays above the object in every browser but IE. To see this in action here is a plunker : http://plnkr.co/edit/MVzMvS4IwYPC8rEx5M4J?p=preview .
You'll see that it works fine in Chrome, and FireFox but not in IE. Any help would be nice. or even a point in the right direction.
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;
}
Above is the demo code used in plunker as an example. The below code is what i have in my project.
.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
};
})
