Question

所以我想在我的应用程序中构建一个主题交换器。我的HTML看起来像这样：

<link href="assets/css/themes/default.min.css" rel="stylesheet" ng-if="settings.theme === 'default' || !settings.theme">
<link href="assets/css/themes/blue-hoki.min.css" rel="stylesheet" ng-if="settings.theme === 'blue-hoki'" />
<link href="assets/css/themes/blue-steel.min.css" rel="stylesheet" ng-if="settings.theme === 'blue-steel'" />
<link href="assets/css/themes/green-haze.min.css" rel="stylesheet" ng-if="settings.theme === 'green-haze'" />
<link href="assets/css/themes/purple-plum.min.css" rel="stylesheet" ng-if="settings.theme === 'purple-plum'" />
<link href="assets/css/themes/purple-studio.min.css" rel="stylesheet" ng-if="settings.theme === 'purple-studio'" />
<link href="assets/css/themes/red-intense.min.css" rel="stylesheet" ng-if="settings.theme === 'red-intense'" />
<link href="assets/css/themes/red-sunglo.min.css" rel="stylesheet" ng-if="settings.theme === 'red-sunglo'" />
<link href="assets/css/themes/yellow-crusta.min.css" rel="stylesheet" ng-if="settings.theme === 'yellow-crusta'" />
<link href="assets/css/themes/yellow-orange.min.css" rel="stylesheet" ng-if="settings.theme === 'yellow-orange'" />

从中可以看出，如果没有选择主题或者所选主题是默认主题，则会加载default.css文件。我有一个保存页面，允许用户选择一个主题，该位一切正常。

我遇到的问题是当我刷新页面或登录时，您会在加载用户选定的主题然后切换到该主题之前先看到默认主题。我必须检测用户主题的代码如下所示：

.run(['$rootScope', '$state', 'AccountService', 'CompanyService', function ($rootScope, $state, account, companyService) {

    // On state change
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {

        // Caused each state change to scroll to the top of the page
        document.body.scrollTop = document.documentElement.scrollTop = 0;

        // Get our user
        var user = account.current(); // This is set in our account service

        // If we have a user and the companyId has not been set
        if (user && user.authenticated && !$rootScope.settings) {

            // Get our company id
            var companyId = user.companyId;

            // Get our company
            companyService.get(companyId).then(function (response) {

                // Create our settings object
                var settings = {
                    theme: response.data.theme,
                    logo: response.data.logo
                };

                console.log(settings);

                // Add to our rootScope
                $rootScope.settings = settings;
            });
        }
    });
}])

有人知道如何在显示视图之前加载主题吗？

Answer 1

您需要创建一个状态，一旦启动应用程序就转换到该状态，然后在解决该状态时需要调用服务并获取主题数据。你需要添加。$ promise，所以控制器等待加载，直到获取数据。

有关详细信息，请查看此链接http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/

//landingpage
<div ng-controller="startCtrl"></div>

//mainpage.html
<div ng-controller="MainPageController">
<link href="assets/css/themes/default.min.css" rel="stylesheet" ng-if="settings.theme === 'default' || !settings.theme">
<link href="assets/css/themes/blue-hoki.min.css" rel="stylesheet" ng-if="settings.theme === 'blue-hoki'" />
<link href="assets/css/themes/blue-steel.min.css" rel="stylesheet" ng-if="settings.theme === 'blue-steel'" />
<link href="assets/css/themes/green-haze.min.css" rel="stylesheet" ng-if="settings.theme === 'green-haze'" />
<link href="assets/css/themes/purple-plum.min.css" rel="stylesheet" ng-if="settings.theme === 'purple-plum'" />
<link href="assets/css/themes/purple-studio.min.css" rel="stylesheet" ng-if="settings.theme === 'purple-studio'" />
<link href="assets/css/themes/red-intense.min.css" rel="stylesheet" ng-if="settings.theme === 'red-intense'" />
<link href="assets/css/themes/red-sunglo.min.css" rel="stylesheet" ng-if="settings.theme === 'red-sunglo'" />
<link href="assets/css/themes/yellow-crusta.min.css" rel="stylesheet" ng-if="settings.theme === 'yellow-crusta'" />
<link href="assets/css/themes/yellow-orange.min.css" rel="stylesheet" ng-if="settings.theme === 'yellow-orange'" />
</div>

//startctrl
    angular.module('myApp').controller('startCtrl', function ($scope, $state) {
        var companyId = user.companyId;
       $state.go('mainState',{companyId: companyId});
    });

//mainctrl 
    angular.module('myApp').controller('MainPageController', function ($scope,company, $stateParams) {
            $scope.theme = company.theme;
    });

// your new state
    'use strict';

    angular.module('myApp')
        .config(function($stateProvider){
            $stateProvider.state('mainState', {
                url: 'main/:companyId',
                views: {
                    '@main': {
                        templateUrl: 'views/mainpage.html',
                        resolve: {
                            companyService: 'CompanyService',
                            company: function (companyService, $stateParams) {

                   //this is where the magic happens 
                   //$promise makes sure the controller 
                   //only loads when the promise is resolved

                                return  companyService.get($stateParams.companyId).$promise;
                            }
                        },
                        controller: 'MainPageController'
                    }
                }
            })
        });

AngularJS在状态加载之前解析

1 个答案: