angularjs - Angular + Breeze プロジェクトでのルックアップのクライアント側キャッシュに関する問題

Question

Angular、Breeze、および UI-Bootstrap を使用した John Papa の HotTowel SPA に基づくプロジェクトがあります。

クライアント側のキャッシュを使用して SQL ルックアップ テーブルからドロップ ダウンをロードする際に問題が発生しています。データがキャッシュされる前にビューが読み込まれるため、ビューが最初に読み込まれたときに空のドロップダウンが表示されます。ビューを更新すると、ドロップダウンが表示されます。これがシーケンスとルーティングの問題であることは認識していますが、それを機能させる方法がわかりません。

この問題は、promise の使用と、promise が正常に返されたことを認識する方法に集中しているようです。プライム関数を使用して、起動時にデータベースからキャッシュされたデータをロードしますが、検索ビューは 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);
        })
    }
}