0

我有一个与 API 服务连接以绑定下拉列表的查找服务。

    var Lookup = angular.module('Lookup', [])
                        .run(function ($window, $rootScope, DropDownLookUp) {

                            debugger;

                            $rootScope.MaritalStatusList = DropDownLookUp.maritalStatusList();

                            $rootScope.ProvinceList = DropDownLookUp.provinceList();

                            $rootScope.GenderList = DropDownLookUp.genderList();

                            $rootScope.ProvinceOfEmploymentList = DropDownLookUp.provinceOfEmploymentList();
                        });

我正在使用 $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;
    }
};

当我的默认 App 模块加载时，将调用此查找模块。

服务被正确解雇。但是我的页面在上述调用完成之前就被加载了。因此下拉菜单中没有显示数据。

我如何才能延迟页面加载，直到我拥有所有必要的数据？

4

1 回答 1

0

简单的方法- 使用$routeProvider 解析方法。- 延迟导航到页面，直到所有承诺都得到履行

其他方法 - 不要渲染 dom 元素或辅助应用程序：

. 以下答案的要点是将任何必要的 dom 元素简单地包装在一个ng-if中，并将评估的表达式设置为您请求true的成功回调中。$http下面的示例有点矫枉过正，因为它在页面上使用了 2 个应用程序。

这可能是一个丑陋的禁忌解决方案，但它确实有效。本质上，我在页面上创建了多个应用程序（这需要手动引导）。第二个应用程序依赖于第一个应用程序，并在第一个应用程序的假$httpvia的假“成功回调”中呈现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)
 })

这是我为了让它运行而分叉的plunker。

于 2013-07-11T21:21:53.443 回答