2013-07-11 3 views
0

У меня есть служба поиска, которая соединяется с сервисом API, чтобы связать выпадающие списки.Задержка разгрузки страницы до привязки модели

Я использую метод $ Http.Get для извлечения данных.

var maritalStatusList = function() { 
    var keyName = "dropdown-maritalstatus-list"; 
    // debugger; 
    var data = StoreData.retrieveStaticData(keyName); 
    if (data == null) { 
     HttpService.Get(config.apiUrl + "HomeAPI/MaritalStatusLookUp", "maritalStatusList", "maritalStatusList").then(function (results) { 
      StoreData.saveStaticData(JSON.stringify(results), keyName); 
      data = results; 
      return data; 
     }); 
    } 
    else { 
     return data; 
    } 
}; 

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

Обслуживание срабатывает правильно. Но моя страница загружается до завершения вышеуказанных звонков. Следовательно, в раскрывающемся списке нет данных.

Как я могу задержать загрузку страницы, пока у меня не будет всех необходимых данных?

+0

Я жду подобного ответа, но не получил ответ http://stackoverflow.com/questions/17457005/how-to-wait-for-dependent-modules-run-function-to-be-completed-before-initilizat –

+0

В зависимости от того, как структурированы ваши асинхронные вызовы, возможно, вместо использования 'return' вы хотите использовать обратный вызов – Justen

+0

. Не важно, чтобы страница загружалась до того, как данные были там, так как у вас есть привязки к данным в модель контроллера должна обновляться, как только она будет доступна. http://www.youtube.com/watch?v=ZhfUv0spHCY&t=10m0s прямо из уст лошади. Возможно, ваша проблема в том, что вы не обновляете контроллер на основе сервиса ... вы можете вернуть обещание от службы ... Clark Pan еще один пользователь SO имеет хороший пост на нем в последнее время, я посмотрю, смогу ли я найти Это. – shaunhusain

ответ

0

Простой способ - Использовать метод $routeProvider resolve. - Задержки навигации на страницу, пока все обещания выполнены


Другой метод - Не делают элементы DOM или вторичные приложения:

. Суть приведенного ниже ответа состоит в том, чтобы просто обернуть любые необходимые элементы dom в ng-if и установить оцениваемое выражение в true в результате обратного вызова успеха вашего запроса $http. Нижеприведенный пример немного переборщит, так как на нем есть 2 приложения.


Это, вероятно, уродливое решение no-no, но оно действительно работает. По сути, я создаю несколько приложений на странице (для чего требуется ручная загрузка). Второе приложение имеет зависимость от первого и выводится в рамках поддельного «успешного обратного вызова» подделки первого приложения $http через ng-if.

Уведомление нет ng-app ссылки, потому что приложение вручную бутстрапированная с помощью элемента ID:

<section ng-if="loaded" id="myapp" ng-controller="MyNameIsController"> 
    My Name is {{FirstName}} {{LastName}}! {{loaded}} 
</section> 

Я имитируя $http запрос с $timeout в первом приложении:

HelloWorldApp.run(function($rootScope, $timeout){ 
    $timeout(function(){ 
     $rootScope.loaded = true; 
    },1500) 
}) 

Here's the plunker I forked, чтобы получить его.

Смежные вопросы