UI 라우터 조건부 UI 뷰?

UI 라우터 조건부 UI 뷰?

나는 이 사소한 문제를 해결할 합리적인 방법을 찾을 수 없다.

게스트가 웹 사이트의 인덱스에 액세스할 때 시작 페이지를 보고 로그인한 사용자가 각 페이지에 고유한 템플릿과 컨트롤러를 가진 프로필을 볼 수 있도록 합니다.1개의 url에 2개의 상태가 있는 것이 이상적이며, 어떻게 해서든 로긴 상태에 따라 액티브한 상태를 자동으로 변경할 수 있습니다.이 두 뷰 모두 자체 중첩 보기를 가지므로 ng-include를 사용할 수 없습니다(내 추측).

저는 angular 및 ui 라우터를 잘 모르기 때문에 이 문제에 대한 쉬운 해결책을 간과하고 있는 것 같습니다.

명명된 뷰와 ng-show로 할 수 있을까요?

UI 라우터를 사용하는 경우 루트 상태, 루트 상태 및'/'URL 및 URL이 없는 두 개의 직계 하위 상태.에서onEnter사용자의 상태를 검출하고 그에 따라 올바른 자녀 상태로 이행합니다.이것에 의해, 양쪽의 자상태에서 같은 URL 를 유지하는 것처럼 보이지만, 다른 설정으로 상태를 분리할 수 있습니다.

templateUrl도 함수가 될 수 있으므로 로그인한 상태를 확인하고 다른 뷰를 반환하여 상태 설정의 일부가 아닌 뷰에서 컨트롤러를 정의할 수 있습니다.

마이솔루션:

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

state 1과 state 2는 다른 곳에 정의되어 있습니다.

문서 작성에는 다음을 사용했습니다.

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

사용.$routeChangeStart나한테는 통하지 않았어

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);
        }]
      });

질문을 이해하면 로그인하지 않은 사용자가 로그인이 필요한 페이지를 볼 수 없도록 해야 합니다.그것이 맞습니까?

컨트롤러 내부의 다음과 같은 코드를 사용해 본 적이 있습니다.

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

모든 장소(아마도 일부 고급 컨트롤러)에서 단순히 바인딩할 수 있어야 합니다.'$routeChangeStart'에 대한 이벤트$rootScope그 후에 체크해 주세요.

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

이것은 새로운 루트가 설정될 때마다 기동됩니다.페이지에 처음 방문했을 때에도 마찬가지입니다.

내가 이걸 하는 방법은 꽤 간단하다.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을 스왑할 수 있습니다.

제 경우, 두 개의 상태가 동일한 컨트롤러의 로직을 공유할 수 있다면 조건부 템플릿이 좋습니다.그렇지 않으면 개별 상태를 작성하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/19429652/ui-router-conditional-ui-views