CODEWITHSUNDEEP
angularjs
user1325584
user1325584

Reputation:

Angularjs : Error: $interpolate:interr Interpolation Error

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...

Upvotes: 0

Views: 1561

Answers (2)

michelem
michelem

Reputation: 14590

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.

Upvotes: 0

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2551

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) {

Upvotes: 1

Related Questions