CODEWITHSUNDEEP
javascriptangularjspdfangularjs-directive
FrancescoMussi
FrancescoMussi

Reputation: 21630

Angular ng-init function loaded after directive

THE SITUATION:

Hello guys! I have an app where is possible to upload file. In the file page, if the file is a pdf file, the app display a little preview of the file.

I am using this very useful directive: angular-pdf-viewer

If i hardcode the path into a scope variable initialized in the controller everything works smoothly.

But of course i have to get some file info that i need for the path.

To do that i have a function that I call with ng-init. The path is taken properly but the problem is that come too late..

In the console first i see the error message coming from the directive (because it does not find the file) and THEN, right after the error message, i see a console test message coming from the function.

That means that the path is loaded too late and not found by the directive

THE ERROR MESSAGE:

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

THE DIRECTIVE:

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

THE VIEW:

<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>

THE FUNCTION:

$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 );
    });

}

THE QUESTION:

There another way to load the function before?

Or, how can i pass the file path to the directive?

Thank you very much!

Upvotes: 0

Views: 1256

Answers (1)

FrancescoMussi
FrancescoMussi

Reputation: 21630

Ok there is an easy solution: Wrap the directive inside an ng-if, in this way the directive is loaded only after the path has been initialized.

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

Upvotes: 1

Related Questions