pdf指令Angular JSのpdfファイルが表示されない

Question

PDFをAngularで開く必要がありますが、pdf.jsとpdf.combined.jsの指示文を使用してみましたが、データを表示できませんでした。私のAngular ver - 1.4.8
ダウンロード可能なボタンやPDF URLが表示されていないはずです.Google Docs Viewerを使用したり、直接BLOBオブジェクトとして開くことはできません。
誰かがこれを解決するのに役立つことができます、ごめんなさい、長いビットですが、どんな助けもありがとう！ありがとう!!

コード -

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

2）tariff.htmlこのようなNG-PDFとコントローラとのdivを持っています - -
クリックでモーダルウィンドウを開くための方法を持っている
1）まず、コントローラ

<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 - PDFデータロードの応答のためのスナップショットを取り付け

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

-

また、 "PDF" 依存関係エラーがブラウザの更新ではなく、最初の負荷に来る -

Answer 1

私の問題DIVと一緒だった。ポップアップ/モーダルウィンドウのCSSクラスは含まれていませんでした。したがって、上記のログに示すようにデータがロードされていても、オーバーレイウィンドウが表示されませんでした。
私はapp.modules.jsベースクラスの依存関係にPDFを追加したため、依存関係のエラーが解決されました。

Answer 2

angular-pdf.jsをHTMLに含める必要があります。ng-pdfディレクティブを使用できます。

角度アプリ定義するときには、依存関係としてディレクティブを含めることも必要があります。

var app = angular.module('app.profile', ['pdf']);

をあなたは、このリンクで、「はじめに」の例を見ることができます：https://github.com/sayanee/angularjs-pdf#getting-started