Инициализация/заполнение полей выбора при загрузке страницы в AngularJS

Question

Я пишу веб-приложение, используя AngularJS. Я использую стороннюю библиотеку (которая предоставляет услугу «Угловая») для извлечения значений из базы данных, а затем использует их для инициализации некоторых выпадающих/выберите поля на странице.

Итак, у меня есть простой полей выбор, как это:

<div ng-controller="ChoiceCtrl"> 
    <select ng-model="selectedFoo" ng-options="foo in foos"></select> 
    <select ng-model="selectedBar" ng-options="bar in bars"></select> 
</div> 

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

angular.module('choice').controller('ChoiceCtrl', function($scope, ThirdPartyService) { 
    $scope.selectedFoo = ''; 
    $scope.selectedBar = ''; 
    $scope.foos = ''; 
    $scope.bars = ''; 

    var fooCallback = function(result) { 
     $scope.foos = result; 
     $scope.$apply; 
    } 

    var barCallback = function(result) { 
     $scope.bars = result; 
     $scope.$apply; 
    } 

    ThirdPartyService.asyncGetData('fetchFooOptions', fooCallback); 
    ThirdPartyService.asyncGetData('fetchBarOptions', barCallback); 
}); 

Вызовы базы данных являются асинхронными и заканчиваются после того, как страница была оказана в первый раз, так что я вручную вызвать $scope.$apply в каждой функции обратного вызова.

Правильно ли вы инициализируете выпадающий список/select в приложении AngularJS, когда значения извлекаются асинхронно при загрузке страницы?

Я читал учебники, говоря, что вызов $scope.$apply вручную - это всегда «запах кода» ... Но поскольку я извлекаю значения из базы данных, операция происходит «за пределами углового», что, по моему мнению, делает эти звонки оправданы - и на самом деле необходимы.

Мне также интересно, подходит ли контроллер для этих вызовов. В учебниках, которые я прочитал, параметры всегда задаются в контроллере, но в этих примерах песочницы никогда не происходит асинхронный вызов базы данных.

Answer 1

Вы должны изменить три вещей в вашем коде

1. Служба должны вернуть обещание: Обратитесь к документации по угловому для создания обещания Внутри службу решимости обещания, когда данные получили от сервера
2. Inside контроллер просто присваивает правильные значения барам и foos, когда обещание разрешено.
3. Удалите $ scope.apply, так как теперь вы изменяете значения в правильном угловом диапазоне

Ссылка: Use Promise and service together in Angular