Question

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

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

但是，当我访问该页面时，在解决任何问题之前，在我使用此ID查询API以解析文件的URL之前，我发现自己点击了该指令。当然，我没有使用值填充指令的范围，因为路由还没有返回解析承诺，所以这是一个空值，最终给我一个pdf.js错误，url isn' 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-view如下所示：

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

谢谢！

Answer 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;
}]);

另外，我想提一下，你发布的指令设计很差，从 angular-way 的角度来看，这可能会让你遇到困难。

如何在ui-route解决之前延迟指令的运行逻辑？

1 个答案: