0

I have this angular code:

myApp.controller('en', [ '$scope', 'PDFViewerService', function($scope, pdf, $ionicLoading) {

                        console.log('en: new instance');

                        $scope.pdfURL = "http://www.tafseer.info/phocadownload/copy_of_the_book/khatima.pdf";//fe.toURL();

                        $scope.instance = pdf.Instance("viewer");

                        $scope.nextPage = function() {
                            $scope.instance.nextPage();
                        };

                        $scope.prevPage = function() {
                            $scope.instance.prevPage();
                        };

                        $scope.gotoPage = function(page) {
                            $scope.instance.gotoPage(page);
                        };

                        $scope.pageLoaded = function(curPage, totalPages) {
                            $scope.currentPage = curPage;
                            $scope.totalPages = totalPages;
                        };

                        $scope.loadProgress = function(loaded, total, state) {
                            console.log('loaded =', loaded, 'total =', total, 'state =', state);
                        };
}]);

And in my template:

<button ng-click="prevPage()">&lt;</button>
<button ng-click="nextPage()">&gt;</button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="{{pdfURL}}" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>

I am trying to get a PDF file inserted into my website with AngularJS, but I keep getting the same error:

Error: $interpolate:interr Interpolation Error

Why do I get this error and how can I get rid of it? All I want is to insert the PDF...

Improve this question
2
  • What's PDFViewerService and pdfviewer directive? Commented Oct 18, 2015 at 7:38
  • 1
    i am use this github.com/akrennmair/ng-pdfviewer Commented Oct 18, 2015 at 7:55

2 Answers 2

Reset to default
1

Your code below to inject dependencies into controller is not correct.

myApp.controller('en', [ '$scope', 'PDFViewerService', function($scope, pdf, $ionicLoading) {

List of dependencies in the array should be exact equal to function parameters Correct it:

myApp.controller('en', [ '$scope', 'PDFViewerService', 'pdf', '$ionicLoading', function($scope, 'PDFViewerService', pdf, $ionicLoading) {
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

i try your code but show me this error Uncaught SyntaxError: Unexpected string
That is because one of the dependencies I listed are all present in your application. I just corrected your syntax error. Make sure all PDFViewerService and pdf and $ionicLoading are present and defined.
Provide a fiddle so that would be easy to debug
0

The main problem is where you get the PDF, that should be in the same origin (domain) to work correctly and not in a remote location, you could try addign $sce.trustAsResourceUrl, but again I don't think it will be sufficient to work:

app.controller('dummy', ['$scope', 'PDFViewerService', '$sce', function ($scope, pdf, $sce) {

    $scope.pdfURL = $sce.trustAsResourceUrl("http://www.tafseer.info/phocadownload/copy_of_the_book/khatima.pdf"); //fe.toURL();

...

My suggestion is to download the PDF in a local directory and open it with pdfviewer from there.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.