0

私は ui-router で AngularJS を使用しています。https://github.com/sayanee/angularjs-pdfで入手できる AngularJS PDF ディレクティブを利用しようとしています。すぐにPDFへのURLがないため、指定された例にいくつかの変更を加える必要があります。

しかし、私は問題に遭遇しました。PDF に関連付けられた id 値をルートに渡すため、ルートの変更が成功するまで、そのパラメーターの解決を待つ必要があります。これは、 https://github.com/angular-ui/ui-router/wikiの [解決] セクションのガイダンスに従って達成しました。

しかし、ページにアクセスすると、これらのいずれかが解決される前に、ファイルの URL を解決するためにこの ID を使用して API にクエリを実行する前に、ディレクティブをクリックしていることに気付きます。もちろん、ルートが解決の約束をまだ返していないため、ディレクティブのスコープに値を入力していません。したがって、これは null 値であり、最終的に pdf.js で URL が「ない」というエラーが発生します。 t が設定されています。

必要に応じてスコープが適切に設定されるまで、ディレクティブ内のロジックの実行を遅らせるにはどうすればよいですか?

したがって、上部にリンクしたディレクティブをダウンロードする必要はありません。私が取り組んでいるものは次のとおりです。

(function () {

    'use strict';

    angular.module('pdf', []).directive('ngPdf', function ($window) {
        return {
            restrict: 'E',
            templateUrl: function (element, attr) {
                return attr.templateUrl ? attr.templateUrl : 'viewer.html';
            },
            link: function (scope, element, attrs) {
                var url = scope.pdfUrl,
                  pdfDoc = null,
                  pageNum = 1,
                  scale = (attrs.scale ? attrs.scale : 1),
                  canvas = (attrs.canvasid ? document.getElementById(attrs.canvasid) : document.getElementById('pdf-canvas')),
                  ctx = canvas.getContext('2d'),
                  windowEl = angular.element($window);

                windowEl.on('scroll', function () {
                    scope.$apply(function () {
                        scope.scroll = windowEl[0].scrollY;
                    });
                });

                PDFJS.disableWorker = true;
                scope.pageNum = pageNum;

                scope.renderPage = function (num) {

                    pdfDoc.getPage(num).then(function (page) {
                        var viewport = page.getViewport(scale);
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

                        var renderContext = {
                            canvasContext: ctx,
                            viewport: viewport
                        };

                        page.render(renderContext);

                    });

                };

                scope.goPrevious = function () {
                    if (scope.pageNum <= 1)
                        return;
                    scope.pageNum = parseInt(scope.pageNum, 10) - 1;
                };

                scope.goNext = function () {
                    if (scope.pageNum >= pdfDoc.numPages)
                        return;
                    scope.pageNum = parseInt(scope.pageNum, 10) + 1;
                };

                scope.zoomIn = function () {
                    scale = parseFloat(scale) + 0.2;
                    scope.renderPage(scope.pageNum);
                    return scale;
                };

                scope.zoomOut = function () {
                    scale = parseFloat(scale) - 0.2;
                    scope.renderPage(scope.pageNum);
                    return scale;
                };

                scope.changePage = function () {
                    scope.renderPage(scope.pageNum);
                };

                scope.rotate = function () {
                    if (canvas.getAttribute('class') === 'rotate0') {
                        canvas.setAttribute('class', 'rotate90');
                    } else if (canvas.getAttribute('class') === 'rotate90') {
                        canvas.setAttribute('class', 'rotate180');
                    } else if (canvas.getAttribute('class') === 'rotate180') {
                        canvas.setAttribute('class', 'rotate270');
                    } else {
                        canvas.setAttribute('class', 'rotate0');
                    }
                };

                PDFJS.getDocument(url).then(function (_pdfDoc) {
                    pdfDoc = _pdfDoc;
                    scope.renderPage(scope.pageNum);

                    scope.$apply(function () {
                        scope.pageCount = _pdfDoc.numPages;
                    });
                });

                scope.$watch('pageNum', function (newVal) {
                    if (pdfDoc !== null)
                        scope.renderPage(newVal);
                });

            }
        };
    });

})();

特に必要だとは思いませんが、コントローラーの簡略図を次に示します。

angular.module('myApp').controller('myController', function($scope, $http, $state) {
 var url = "http://example.com/myService";
 $http.get(url)
  .success(function(data, status, headers, config) {
    $scope.pdfUrl = data.url;
    $scope.pdfName = data.name;
    $scope.scroll = 0;
    $scope.getNavStyle = function(scroll) {
      if (scroll > 100) return 'pdf-controls fixed';
      else return 'pdf-controls';
    }
  })
  .error(function(data, status, headers, config) {
    $state.go('failure.state');
  });
});

ui ビューは次のようになります。

<ng-pdf template-url="pathToTemplate/viewer.html" canvasid="pdf" scale="1.5"></ng-pdf>

ありがとう！

4

1 に答える 1

1

コントローラーがロードされる前に、ui-router resolve 機能を使用して pdfUrl を取得する必要があるようです。たとえば、$httpコントローラー内で使用する代わりに、ルート解決関数への呼び出しの結果を返して、$httpコントローラーの初期化時にスコープを設定できるようにする必要があります。これは、開始するための基本的な例です (記述どおりには機能しません)。

サービス：

angular.module('myApp', [])
.factory('PdfService', ['$http', function($http){
        return {
            getURL: function(id){
                // return promise from http
                return $http(urlWithProvidedId).then(function(result){
                    // return all necessary result data as object to be injected
                    return {
                        url: result.data.url
                    };
                });    
            }
        };
    }]);

次に、ルート構成内で次のようにします。

.state('somestate', { controller: 'myController', templateUrl: 'sometemplate.html',
    resolve: { _pdfData: ['PdfService', '$stateParams', function(PdfService, $stateParams) {                                
        return PdfService.getURL($stateParams.whateverThePdfIdIs);                              
    }]}});

次に、結果をコントローラーに挿入します

.controller('myController', ['$scope', '_pdfData', function($scope, _pdfData){
    // set the pdf url
    $scope.pdfUrl = _pdfData.url;
}]);

また、あなたが投稿したディレクティブは、角度の観点から非常に貧弱に設計されていることに言及したいと思います。これは、あなたが抱えている問題に影響を与える可能性があります。

于 2014-06-25T23:59:33.253 に答える