Question

我无法找到一种合理的方法来解决这个相当琐碎的问题。

我希望访客在访问网站索引时看到启动页面，然后登录用户查看他们的个人资料，每个页面都有自己的模板和控制器。 理想情况下，一个网址会有两种状态，不知怎的，我可以根据登录状态自动更改活动状态。这两个视图都有自己的嵌套视图，因此无法使用ng-include（我假设）。

我对angular和ui路由器都很陌生，并认为我可能会忽略这个问题的简单解决方案。

是否可以使用命名视图和ng-show完成？

Answer 1

如果您正在使用UI路由器，只需创建三种状态：根状态，'/' URL，以及两个没有URL的直接后代状态。在根状态的onEnter中，您可以检测用户的状态并相应地转换到正确的子状态。这给出了两个子状态保持相同URL的外观，但允许您使用单独的配置分离状态。

Answer 2

templateUrl也可以是一个函数，因此您可以检查登录状态并返回不同的视图并在视图中定义控制器，而不是作为状态配置的一部分

Answer 3

我的解决方案：

angular.module('myApp')
.config(function ($stateProvider) {
    $stateProvider
        .state('main', {
            url: '/',
            controller: function (Auth, $state) {
                if (someCondition) {
                    $state.go('state1');
                } else {
                    $state.go('state2');
                }
            }
        });
});

其中状态1和状态2在别处定义。

Answer 4

出于文档目的，我使用了：

$rootScope.$on('$stateChangeStart', function(event, toState) {
  if ((toState.name !== 'login') && (!$localStorage.nickname)) {
    event.preventDefault();
    $state.go('login');
  }
});

使用$routeChangeStart对我不起作用。

Answer 5

如果我理解这个问题;您希望确保未登录的用户无法看到需要登录的页面。这是正确的吗？

我在控制器中使用这样的代码完成了这项工作：

if(!'some condition that determines if user has access to a page'){
 $location.path( "/login" );
}

Answer 6

随时随地（可能在某些高级控制器中）您应该能够将'$routeChangeStart'事件绑定到$rootScope，然后进行检查：

$rootScope.$on('$routeChangeStart', function(next, current){
    if(next != '/login' && !userLoggedIn){
        $location.path( "/login" );
    }
});

每次设置新路线时都会触发，即使首次访问该页面也是如此。

Answer 7

它用于ui-route中的条件视图

$stateProvider.state('dashboard.home', {
        url: '/dashboard',
        controller: 'MainCtrl',
       // templateUrl: $rootScope.active_admin_template,
        templateProvider: ['$stateParams', '$templateRequest','$rootScope', function ($stateParams, templateRequest,$rootScope) {
          var templateUrl ='';
          if ($rootScope.current_user.role == 'MANAGER'){
            templateUrl ='views/manager_portal/dashboard.html';
          }else{
            templateUrl ='views/dashboard/home.html';
          }
          return templateRequest(templateUrl);
        }]
      });

Answer 8

我这样做的方法非常简单。我为我们的A / B测试策略做了一个。这是要点：

resolve: {
   swapTemplate: function(service) {
      // all of this logic is in a service
      if (inAbTest) {
         this.self.templateUrl = '/new/template.html';
      }
   }
   ... other resolves
}

这会在模板下载之前被调用，因此您可以换出模板URL。

Answer 9

在我的情况下，如果两个状态可以共享同一控制器的逻辑，条件模板是一个不错的选择。否则，创建单独的状态是一个不错的选择。

UI路由器条件ui视图？

9 个答案: