如何在 $routeProvider 中的多个 templateUrls 之间切换答案

【问题标题】：How to switch between multiple templateUrls in $routeProvider如何在 $routeProvider 中的多个 templateUrls 之间切换
【发布时间】：2018-08-31 09:35:11
【问题描述】：

我今天花了很多时间寻找使用 $routeProvider 在 angularjs 中切换模板 url 的解决方案，但似乎他们的解决方案在我的情况下不起作用。用户故事中的要求需要相同的 url: /home 用于不同的用户角色（普通和审计员），在他们登录后。以下是当前代码：

$routeProvider
            .when(
                '/home',
                {
                    templateUrl: 'views/pages/home/home-page-view.html',
                    controller: 'HomePageController',
                    resolve: {
                        loggedin: checkLoggedin
                    }
                })
            .when(
                '/auditor-home',
                {
                    templateUrl: 'views/pages/auditor-home/auditor-home-page-view.html',
                    controller: 'AuditorHomePageController',
                    resolve: {
                        loggedin: checkLoggedin
                    }
                }
            ).otherwise(
            {
                redirectTo: '/home'
            }
        );

现在我不想使用路由 /auditor-home，只使用一个路由：/home 既适用于审计用户，也适用于普通用户。请记住，我必须调用 API（在函数 checkLoggedin 中）来获取用户是审计员还是普通用户。如果需要，下面是函数 checkLoggedin 的代码：

checkLoggedin = function ($q, $window, AuthenticationService, UserModel, UserService, OrganisationService, HomePageService, $location) {
            var deferred = $q.defer();
            AuthenticationService.authenticate().then(
                function successHandler() {
                    return UserService.user();
                },
                function errorHandler(errorResponse) {
                    deferred.reject(errorResponse);
                }
            ).then(
                function successHandler(successResponse) {
                    UserModel.user = (successResponse && successResponse.data) ? successResponse.data : {};
                    return HomePageService.checkKpiTestMode();
                },
                function errorHandler(errorResponse) {
                    deferred.reject(errorResponse);
                }
            ).then(
                function successHandler(successResponse) {
                    var testModeInfo = successResponse.data;
                    isAuditor = UserModel.isAuditCompanyAdmin() || UserModel.isAuditAdmin();
                    isSiteAdmin = UserModel.isSiteAdmin();
                    isCompanyAdmin = UserModel.isCompanyAdmin();
                    if (!UserModel.isCompanyAdmin() && !UserModel.isSiteAdmin() && !UserModel.isAuditCompanyAdmin() && !UserModel.isAuditAdmin()) {
                        deferred.reject();
                    } else if (testModeInfo && testModeInfo.testMode === true && testModeInfo.authorisedUsersForTesting && testModeInfo.authorisedUsersForTesting.indexOf(UserModel.user.userCode) === -1) {
                        deferred.reject();
                    } else if (UserModel.user.organisationCode) {
                        if (isAuditor) {
                            $location.path('auditor-home');
                        }
                        return OrganisationService.getMy();
                    } else {
                        deferred.resolve();
                    }
                },
                function errorHandler(errorResponse) {
                    deferred.reject(errorResponse);
                }
            ).then(
                function successHandler(successResponse) {
                    UserModel.organisationName = successResponse && successResponse.data ?
                        successResponse.data.organisationName : null;
                    deferred.resolve();
                },
                function errorHandler(errorResponse) {
                    deferred.resolve();
                }
            );

            return deferred.promise;
        };

【问题讨论】：

标签： javascript html angularjs controller angular-ui-router

【解决方案1】：

感谢@arbghl 的评论，以下是我的回答： main.js：

$routeProvider
            .when(
                '/home',
                {
                    template: '<div ng-include="getTemplate()"></div>',
                    controller: 'DefaultPageController',
                    resolve: {
                        loggedin: checkLoggedin
                    }
                })
            .otherwise(
            {
                redirectTo: '/home'
            }
     );

default-page-controller.js：

angular.module(
'DefaultPageControllerModule', []).controller(
    'DefaultPageController', [
        '$scope',
        'UserModel',
        function ($scope, UserModel) {
            $scope.getTemplate = function () {
                var isAuditor = UserModel.isAuditCompanyAdmin() || UserModel.isAuditAdmin();
                if (isAuditor) {
                    return 'views/pages/auditor-home/auditor-home-page-view.html';
                } else {
                    return 'views/pages/home/home-page-view.html';
                }
            };
        }
    ]
);

【讨论】：

【解决方案2】：

你可以试试下面提到的方法：

when('/home',
            {
                template: '<div ng-include="getTemplate()"></div>',
                controller: 'HomePageController',
                resolve: {
                    loggedin: checkLoggedin
                }
            })
...

然后在您的控制器中，您可以根据 checkLoggedin 函数的返回值设置模板。

 $scope.getTemplate = function(){
        if (checkLoggedIn) {
           return 'a.tpl.html';
        } else {
           return 'b.tpl.html';
        }
}

【讨论】：