Question

这里我在ui.route中有一个整齐配置的路由模式

'use strict';

var app = angular.module('myApp', [ 'ngAnimate', 'ui.router']);

app.config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider.state('App', {
        url : '/',
        views : {
            'header' : {
                templateUrl : 'partials/header.jsp',
                controller : 'headerController'
            },
            'body' : {
                templateUrl : 'partials/indexbody.jsp',
                controller : 'indexBodyController'
            },
            'footer' : {
                templateUrl : 'partials/footer.jsp'
            }
        }
    }).state('App.Dashboard', {
        url : 'Dashboard',
        views : {
            'body@' : {
                templateUrl : 'partials/dashboard.jsp',
                controller : 'dashboardController'
            },
            'dashboardBody@App.Dashboard' : {
                templateUrl : 'partials/dashboard_adddeal.jsp'
            }
        }
    }).state('App.Dashboard.AddDeal', {
        url : '/AddDeal',
        views : {
            'dashboardBody@App.Dashboard' : {
                templateUrl : 'partials/dashboard_adddeal.jsp'
            }
        }
    }).state('App.Dashboard.Section2', {
        url : '/Section2',
        views : {
            'dashboardBody@App.Dashboard' : {
                templateUrl : 'partials/a.html'
            }
        }
    });
} ]);

一切正常，但我希望在身份验证成功后更改“应用”状态中的“正文视图”

简单地说它我想在认证后显示不同的状态。

我对角度很新，所以对我很轻松;）

Answer 1

解决方案取决于您如何实施身份验证，但有两种方法可以动态指定模板。

templateUrl可以是一个函数，它接受一个参数$stateParams，并返回一个URL

或者，templateProvider可以是具有返回模板HTML的注入参数的函数。

详细信息：https://github.com/angular-ui/ui-router/wiki#templates

话虽如此，我会谨慎对待其中任何一条路径。如果用户的身份验证状态在没有状态更改的情况下更改，则可能不会更新正在使用的模板。

Answer 2

您可以在resolve来电时使用$stateProvider.state承诺。

例如：

.state('App', {
                url: '/',
                /*some skipped lines*/
                resolve: {
                    /*verify the authentication*/
                    verify();
                    $state.go('App.Dashboard');
                }
            });

您可以在此处执行更多详细信息：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#resolve

如何在angularjs中进行身份验证时更改状态的templateUrl

2 个答案: