0

我们有一个基于 John Papa 使用 Angular、Breeze 和 UI-Bootstrap 的 HotTowel SPA 的项目。

我们在使用客户端缓存从 SQL 查找表中加载下拉列表时遇到了问题。视图在数据缓存之前加载，导致视图首次加载时出现空的下拉菜单。如果我们刷新视图，则会填充下拉列表。我们意识到这是排序和路由问题，但无法弄清楚如何使其工作。

这个问题似乎集中在 Promise 的使用以及如何识别它们何时成功返回。我们使用prime函数在启动时从数据库加载缓存数据，但在getActionDomain()函数访问数据之前加载搜索视图。

我们将不胜感激任何指示或想法。

谢谢，

JG

app.js 中的 app.run 是起点

(function () {
    'use strict';

    var serviceId = 'app';
    var app = angular.module('app', [
        // Angular modules 
        'ngAnimate',        // animations
        'ngRoute',          // routing
        'ngSanitize',       // sanitizes html bindings (ex: sidebar.js)
        // Custom modules 
        'common',           // common functions, logger, spinner
        //'common.bootstrap', // bootstrap dialog wrapper functions

        // 3rd Party Modules
        'ui.bootstrap'      // ui-bootstrap (ex: carousel, pagination, dialog)
    ]);

    // Handle routing errors and success events
    app.run(['$route', '$rootScope', '$location', '$http', 'Auth', 'datacontext', 'common',  function ($route, $rootScope, $location, $http, Auth, datacontext, common) {

        var getLogFn = common.logger.getLogFn;
        var log = getLogFn(serviceId);
        var logError = getLogFn(serviceId, 'error');
        var logSuccess = getLogFn(serviceId, 'success');
        var $q = common.$q;

        //breeze.core.extendQ($rootScope, $q);
        primeData();

        function primeData() {

            return datacontext.prime()
                .then(startRouting)
                .then(querySucceeded, _queryFailed, null);


            function querySucceeded(data) {
                log('Retrieved [Lookups] from remote data source', data, true);
                return true;
            }



        }

        function startRouting() {
            $rootScope.$on('$routeChangeStart', function (event, next, current) {
                $rootScope.error = null;

                if ($rootScope.user) {
                    return true;
                } else {
                    $rootScope.user = {};

                    var defered = $q.defer();

                    checkRouting($q, $rootScope, $location);

                    return defered.promise;
                }

            });

            var checkRouting = function ($q, $rootScope, $location) {
                var defered = $q.defer();

                Auth.getCurrentUser()
                    .then(function (data) {
                        $rootScope.user.isInUserGroup = data.data.IsInUserGroup;
                        $rootScope.user.firstName = data.data.FirstName.replace(/\"/g, "");
                        $rootScope.user.lastName = data.data.LastName.replace(/\"/g, "");
                        $rootScope.user.userName = data.data.UserName.replace(/\"/g, "");
                    });

                return defered.promise;
            };
        }

        function _queryFailed(error) {
            var msg = config.appErrorPrefix + 'Error priming data.' + error.message;
            logError(msg, error);
            throw error;
        }
    }]);

})();

主要功能位于 datacontext.js 模块中：

function prime() {
    if (primePromise) return primePromise;

    var deferred = $q.defer();

    primePromise = $q.all([getLookupLists()])
        .then(extendMetadata)
        .then(success);

    function success() {
        setLookups();
        dataPrimed = true;
        //apps.startRouting();
        log('Primed the data');
    };

    function extendMetadata() {
        var metadataStore = manager.metadataStore;
        var types = metadataStore.getEntityTypes();
        types.forEach(function (type) {
            if (type instanceof breeze.EntityType) {
                set(type.shortName, type);
            }
        });

        function set(resourceName, entityName) {
            metadataStore.setEntityTypeForResourceName(resourceName, entityName);
        }
    }

    deferred.promise = primePromise;
    return deferred.promise;


}

function setLookups() {
    service.lookupCachedData = {
        actions: _getAllLocal('ActionDomain', 'sortorder'),
        statusCodes: _getAllLocal('StatusDomain', 'sortorder')
    }
}

function _getAllLocal(resource, ordering) {
    return EntityQuery.from(resource)
    .orderBy(ordering)
    .using(manager)
    .executeLocally();
}

function getLookupLists() {
    return EntityQuery.from('Lookups')
    .using(manager).execute()
    .then(querySucceeded, _queryFailed);

    function querySucceeded(data) {
        log('Retrieved [Lookups] from remote data source', data, false);
        return true;
    }

}

代码在 search.js 视图控制器模块中调用

function activate() {
    common.activateController([getActionDomain(), getStatusDomain(), getCpuLog()], controllerId)
        .then(function () { log('Activated search View', null, false); });
}


function getActionDomain() {
    if (datacontext.lookupCachedData && datacontext.lookupCachedData.actions) {
        vm.actions.push({ value: 0 });
        datacontext.lookupCachedData.actions.forEach(function (actionItem) {
            vm.actions.push(actionItem);
        })
    }
}

function getStatusDomain() {
    if (datacontext.lookupCachedData && datacontext.lookupCachedData.statusCodes) {
        vm.statusList.push({ value: 0 });
        datacontext.lookupCachedData.statusCodes.forEach(function (statusItem) {
            vm.statusList.push(statusItem);
        })
    }
}
4

1 回答 1

0

如果您想在显示视图之前等待 promise 被解析，您可以在配置应用程序模块时使用服务 $routeProvider 中的resolve属性。

有一个例子：

  $routeProvider.when('/staff_profil/edit', {
      templateUrl: 'app/app/assets/partials/profil-edit.html', 
       controller: 'ProfilEditController'
       resolve: {
          'currentUser':function( UserService){            
           return UserService.getCurrentUser();
      }
  });

你必须在决心中回报一个承诺！！

在这个例子中，我在显示我的配置文件编辑页面之前等待获取 currentUser。UserService.getCurrentUser() 是我的 UserService 中的 $http 服务创建的承诺。

此外，您可以在我的控制器 ProfilEditController 中使用此承诺解析，方法是在我的控制器中注入“currentUser”，就像它是一项服务一样，然后您可以在控制器和视图中使用 currentUser.name。

我希望这能帮到您！

于 2014-01-24T19:49:43.017 回答