pdf directive not showing pdf file in Angular JS

Viewed 1529

I need to open a PDF in Angular, I have tried using pdf.js and pdf.combined.js directives but unable to display the data. My Angular ver - 1.4.8
Since it shouldn't have downloadable button or PDF URL visible.So i can't use google docs viewer or directly opening it as BLOB Object.
Can someone help me in solving this, sorry bit lengthy but any help is appreciated,Thanks !!

Code -
1) First controller which has method to open a modal window on click -

vm.getCallRates = function() {
        ModalService.showModal({
            templateUrl: absoluteURL('app/profile/tariff.html'),
            inputs: {},
            controller: 'tariffController'
        });
}

2) tariff.html has a div with ng-pdf and controller like this -

<div ng-controller="tariffController">
<ng-pdf template-url="app/profile/pdfViewer.html" canvasid="pdf-canvas" 
   scale="1.5" ></ng-pdf>
</div>  

3) tariffController -

(function () {
'use strict';

angular
    .module('app.profile')
    .controller('tariffController', tariffController);

tariffController.$inject = ['$scope']; 


function tariffController($scope) {
    $scope.pdfUrl = "http://172.16.23.26:3123/images/Invoice.pdf";

//$scope.pdfName = 'Relativity: The Special and General Theory by Albert Einstein';
    //$scope.pdfPassword = 'test';

    $scope.scroll = 0;
    $scope.loading = 'loading';

    $scope.getNavStyle = function(scroll) {
        if(scroll > 100) return 'pdf-controls fixed';
        else return 'pdf-controls';
    }

    $scope.onError = function(error) {
        console.log(error);
    }

    $scope.onLoad = function() {
        $scope.loading = '';
    }

    $scope.onProgress = function (progressData) {
        console.log(progressData);
    };

    $scope.onPassword = function (updatePasswordFn, passwordResponse) {
        if (passwordResponse === PDFJS.PasswordResponses.NEED_PASSWORD) {
            updatePasswordFn($scope.pdfPassword);
        } else if (passwordResponse === PDFJS.PasswordResponses.INCORRECT_PASSWORD) {
            console.log('Incorrect password')
        }
    };

}

}());

4) pdfViewer.html -

<nav ng-class="getNavStyle(scroll)">
<button ng-click="goPrevious()"><span>&lt;</span></button>
<button ng-click="goNext()"><span>&gt;</span></button>

<button ng-click="zoomIn()"><span>+</span></button>
<button ng-click="fit()"><span>100%</span></button>
<button ng-click="zoomOut()"><span>-</span></button>

<button ng-click="rotate()"><span>90</span></button>

<span>Page: </span>
<input type="text" min=1 ng-model="pageNum">
<span> / {{pageCount}}</span>

&nbsp;&nbsp;
<span>Document URL: </span>
<input type="text" ng-model="pdfUrl">
</nav>
<hr>
{{loading}}
<canvas id="pdf-canvas"></canvas>

Attaching snapshot for response of PDF data load -enter image description here

Also "pdf" dependency error comes on browser refresh but not on first loading -enter image description here

2 Answers
Related