Данные от MongoDB загружаются после директивного вызова

Question

У меня есть небольшое демо-приложение для счета, которое я создаю с помощью Angular. Данные хранятся в MongoDB и вызываются в имена контроллеров соответственно invoiceCtrl. Контроллер выглядит следующим образом:

invCon.controller('invoiceCtrl', ['$http', function($http) { 
     //Ajax call to retrieve items from db 
     this.items = $http({ 
      method: 'GET', 
      url: '/author' 
     }).then(function successCallback(response){ 
      console.log('Succesful Response'); 
      return response.data[0].items; 
     }, function errorCallback(response){ 
      console.log('Error Response'); 
      console.log(response); 
     }); 

Проблема у меня в том, что к тому времени, когда Ajax запрос, чтобы получить эти данные добил вид уже вынесший модель и ничего загружена, то есть сказать вызывается директива, и шаблон отображается для данных даже существует. Я думал, что работа двухсторонней привязки данных заключалась в том, что когда модель была обновлена, представление было бы? Пропустил ли я что-то в том, как Угловая делает это двусторонней привязкой данных?

Некоторые из сообщений, которые я изучил, по-видимому, рекомендуют использовать фабрику для извлечения этих данных? Это то, что я должен изучать? Я довольно новичок в угловатости, поэтому любая помощь будет оценена по достоинству.

Edit 1:

Вот директивы:

(function(){ 

    var invDir = angular.module('invoice-directives', []); 

    invDir.directive('envoyInvoice', function() { 
     return { 
      restrict: 'E', 
      templateUrl: 'templates/invoice/invoice.html' 
     }; 
    }); 

    invDir.directive('invoiceLogo', function(){ 
     return { 
      templateUrl: 'templates/invoice/parts/invoice-logo.html' 
     }; 
    }); 

    invDir.directive('invoiceMeta', function(){ 
     return { 
      templateUrl: 'templates/invoice/parts/invoice-meta.html' 
     }; 
    }); 

    invDir.directive('invoiceJob', function(){ 
     return { 
      templateUrl: 'templates/invoice/parts/invoice-job.html' 
     }; 
    }); 

    invDir.directive('invoiceTable', function(){ 
     return { 
      templateUrl: 'templates/invoice/parts/invoice-table.html' 
     }; 
    }); 

    invDir.directive('invoiceSummary', function(){ 
     return { 
      templateUrl: 'templates/invoice/parts/invoice-summary.html' 
     }; 
    }); 


})(); 

Answer 1

Вы не должны возвращать данные в обработчик успеха. Вместо этого вы храните его внутри переменной области видимости. Для этого сначала введите $scope в контроллер.

invCon.controller('invoiceCtrl', ['$scope', '$http', function($scope, $http) { 
     //Ajax call to retrieve items from db 
     $http({ 
      method: 'GET', 
      url: '/author' 
     }).then(function successCallback(response){ 
      console.log('Succesful Response'); 
      $scope.items = response.data[0].items; 
     }, function errorCallback(response){ 
      console.log('Error Response'); 
      console.log(response); 
     }); 

Теперь вы можете использовать items на ваш взгляд HTML. Поскольку угловые поддерживает двустороннюю привязку, представление будет автоматически обновляться, как только обновится $scope.items.