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

0

У меня есть небольшое демо-приложение для счетов, которое я использую с помощью 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 для получения этих данных завершился, представление уже отобразило модель, и ничего не загружено, то есть вызывается директива, и шаблон отображается для данных даже существует, Я думал, что работа двухсторонней привязки данных заключалась в том, что когда модель была обновлена, представление было бы? Я пропустил что-то в том смысле, что Угловая делает это двусторонним связыванием данных?

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

Изменить 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'
        };
    });


})();
  • 0
    Пожалуйста, укажите ваш код директивы тоже.
Теги:
express

1 ответ

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.

  • 0
    Итак, это работает с использованием $ scope. Спасибо, я думаю, мне нужно провести еще какое-то исследование о $ scopes. Очень признателен.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню