Угловая функция нг-INIT загружается после директивы

Question

СИТУАЦИИ:

Привет, ребята! У меня есть приложение, где можно загрузить файл. На странице файла, если файл является файлом PDF, приложение отображает небольшой предварительный просмотр файла.

Я использую эту очень полезную директиву: angular-pdf-viewer

Если я жёстко путь в переменную области видимости инициализируется в контроллере все работает гладко.

Но, конечно, мне нужно получить информацию о файле, которая мне нужна для пути.

Для этого у меня есть функция, которую я вызываю с помощью ng-init. Путь берется должным образом, но проблема в том, что пришло слишком поздно.

В консоли сначала я вижу сообщение об ошибке, исходящее из директивы (поскольку он не находит файл) и THEN, сразу после сообщения об ошибке , я вижу консольное тестовое сообщение, поступающее из функции.

Это означает, что путь загружается слишком поздно и не нашел директивой

ОШИБКА СООБЩЕНИЕ:

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, если, таким образом, директива загружается только после того, как путь был инициализирован.

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