Question

情况：

大家好！我有一个应用程序可以上传文件。在文件页面中，如果文件是pdf文件，则应用程序会显示该文件的一些预览。

我正在使用这个非常有用的指令：angular-pdf-viewer

如果我将路径硬编码到控制器中初始化的范围变量中，一切都会顺利进行。

但当然我必须获得路径所需的一些文件信息。

要做到这一点，我有一个我用ng-init调用的函数。路径是正确的，但问题是来得太晚..

在控制台中我首先看到来自指令的错误消息（因为它找不到文件）然后，在错误消息之后，我看到来自该函数的控制台测试消息。

这意味着路径加载太晚而且指令

找不到

错误消息：

Error: Invalid parameter object: need either .data, .range or .url

指令：

app.directive('myPdfViewerToolbar', [
 'pdfDelegate',
  function(pdfDelegate) {
  return {
   restrict: 'E',
   template:
    '<div class="clearfix mb2 white bg-blue">' +
      '<div class="left">' +
        '<a href=""' +
          'ng-click="prev()"' +
          'class="button py2 m0 button-nav-dark">Back' +
         '</a>' +
        '<a href=""' +
          'ng-click="next()"' +
          'class="button py2 m0 button-nav-dark">Next' +
        '</a>' +
        '<span class="px1">Page</span> ' +
        '<input type="text" class="field-dark" ' +
          'min=1 ng-model="currentPage" ng-change="goToPage()" ' +
           'style="width: 10%"> ' +
        ' / {{pageCount}}' +
      '</div>' +
    '</div>',
   scope: 
   { 
        pageCount: '='

    },
   link: function(scope, element, attrs) {
     var id = attrs.delegateHandle;
     scope.currentPage = 1;

    scope.prev = function() {
      pdfDelegate
        .$getByHandle(id)
        .prev();
      updateCurrentPage();
    };
    scope.next = function() {
      pdfDelegate
        .$getByHandle(id)
        .next();
      updateCurrentPage();
    };
    scope.goToPage = function() {
      pdfDelegate
         .$getByHandle(id)
         .goToPage(scope.currentPage);
     };


    var updateCurrentPage = function() {
      scope.currentPage = pdfDelegate
                            .$getByHandle(id)
                             .getCurrentPage();
    };
  }
};
}]);

观点：

<h2>File preview</h2>

<my-pdf-viewer-toolbar
    delegate-handle="my-pdf-container">
</my-pdf-viewer-toolbar>
<pdf-viewer
    delegate-handle="my-pdf-container"
    url="file_url"
    scale="1"
    show-toolbar="false">
</pdf-viewer>

功能：

$scope.get_file_path = function()
{
    var deferred = $q.defer();

    $http({
        method: 'POST',
        url: base_url + 'api/get_file_detail/'  + $stateParams.file_id

    })         
    .success( function( data, status, headers, config )
    {
        deferred.resolve( data );

        $scope.file_url = base_url + 'data/localhost/drawer/' + data.data_id + '/' + data.filename;

        console.log($scope.file_url);

    })
    .error( function( data, status, headers, config )
    {
        deferred.reject( data );
    });

}

问题：

还有另一种加载函数的方法吗？

或者，我如何将文件路径传递给指令？

非常感谢！

Answer 1

好的有一个简单的解决方案：将指令包装在ng-if中，这样只有在路径初始化之后才加载指令。

<div ng-if="file_url">
  <pdf-viewer
      delegate-handle="my-pdf-container"
      url="file_url"
      scale="1"
      show-toolbar="false">
</div>

指令后加载Angular ng-init函数

1 个答案: