У меня есть небольшое демо-приложение для счетов, которое я использую с помощью 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'
};
});
})();
Вы не должны возвращать данные в обработчик успеха. Вместо этого вы храните его внутри переменной области видимости. Для этого сначала введите $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
.