0

我正在将 AngularJS 与 ui-router 一起使用。我正在尝试使用https://github.com/sayanee/angularjs-pdf上提供的 AngularJS PDF 指令。我必须对给出的示例进行一些更改，因为我没有立即获得 PDF 的 URL。

但是，我遇到了一个问题。因为我将与 PDF 关联的 id 值传递到路由中，所以我必须等待解析该参数，直到路由更改成功。我在解决部分下的https://github.com/angular-ui/ui-router/wiki的指导下完成了这项工作。

但是，当我访问该页面时，在解决任何问题之前，并且在我使用此 ID 查询 API 以解析文件的 URL 之前，我发现自己点击了指令。当然，我没有用值填充指令的范围，因为路由还没有返回解析承诺，所以这是一个空值，最终在 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 解析功能来获取 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 回答