I am using
<div ng-controller="DailyReportsController">
<iframe ng-src="{{content}}" style="width:100%;height:100%;"></iframe>
</div>
to include 'pdf' file in html page. The corresponding controller is given below
mainApp.controller('DailyReportsController',
['$scope', '$state', '$rootScope', 'mainWebService', '$http', '$sce',
function($scope, $state, $rootScope, mainWebService, $http, $sce) {
angular.element(document).ready( function() {
var drtab = new Royal_Tab($('.dailyrpts_tabs.royal_tab'));
$scope.content =$sce.trustAsResourceUrl("https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf");
}
]);
But following error raises
TypeError: Cannot read property 'nodeName' of undefined
at La (http://localhost:8080/flipxl/scripts/angular.min.js:142:109)
at Object.Kb.$set (http://localhost:8080/flipxl/scripts/angular.min.js:65:380)
at Object.fn (http://localhost:8080/flipxl/scripts/angular.min.js:63:358)
at k.$digest (http://localhost:8080/flipxl/scripts/angular.min.js:109:172)
at k.$apply (http://localhost:8080/flipxl/scripts/angular.min.js:112:173)
at h (http://localhost:8080/flipxl/scripts/angular.min.js:72:454)
at w (http://localhost:8080/flipxl/scripts/angular.min.js:77:347)
at XMLHttpRequest.z.onreadystatechange (http://localhost:8080/flipxl/scripts/angular.min.js:78:420)
Have any solution please share with me
Works perfectly fine for me when adding a $scope.$apply because of the ready event and fixing the missing braces (DEMO, iframes unfortunately don't seem to work in SO snippets).
I was not able to reproduce your error though.
mainApp.controller('DailyReportsController',
['$scope', '$state', '$rootScope', 'mainWebService', '$http', '$sce', function($scope, $rootScope, $http, $sce) {
angular.element(document).ready( function() {
//var drtab = new Royal_Tab($('.dailyrpts_tabs.royal_tab'));
$scope.$apply(function() {
$scope.content = $sce.trustAsResourceUrl("https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf");
});
});
}]);
You can use directive feature for this as below.
var ngApp = angular.module("ngApp",[]);
ngApp.directive("pdfLoader",function(){
return function(scope,elem,attr){
elem.append("<object width='100%' height='100%' src='"+ scope.content +"' type='application/pdf'></object>");
};
});
ngApp.controller("ngCtrl",function($scope){
$scope.content ="https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf";
});
and html like below
<div style="height:100%" pdf-loader></div>
Take a look at running example for this at http://jsbin.com/quzoyiloke , And code at http://jsbin.com/quzoyiloke/3/edit?html,js
You can also try by creating new html file whose content is as following.
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.directive("pdfLoader",function(){
return function(scope,elem,attr){
elem.append("<object width='100%' height='100%' src='"+ scope.content +"' type='application/pdf'></object>");
};
});
myApp.controller("ngCtrl",function($scope){
$scope.content ="https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf";
});
</script>
</head>
<body ng-app="ngCtrl">
<div ng-controller="ngCtrl">
<div style="height:100%" pdf-loader></div>
</div>
</body>
</html>