javascript - Angular ng-init 函数在指令后加载

Question

情况:

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

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

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

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

为此，我有一个使用 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>