Question

我有一个查找服务，它连接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模块加载时，将调用此查找模块。

服务正在被解雇。但在完成上述调用之前，我的页面已加载。因此，下拉列表中不显示任何数据。

如果我拥有所有必要的数据，我该如何延迟页面加载？

Answer 1

简易方法 - 使用$routeProvider resolve方法。 - 延迟导航到页面，直到完成所有承诺

其他方法 - 请勿渲染dom元素或辅助应用

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

这可能是一个丑陋的禁忌解决方案，但确实有效。本质上，我在页面上创建多个应用程序（需要手动引导）。第二个应用程序依赖于第一个应用程序，并通过$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让它继续下去。

延迟页面卸载，直到模型绑定

1 个答案: