2014-12-30 2 views
3

을 throw 한 후 템플리트로 리디렉션 할 때 Angular UI Router 문제가 발생합니다. 따라서이 문제를 이해하고 mcve에 오랜 시간이 걸렸습니다. 다음은 그 예입니다. 인증되지 않은 사용자를 로그인 페이지로 리디렉션하려고합니다 (이는 매우 기본적인 문제입니다).resolve()가 오류

HTML :

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script> 
    <script src="js/app.js"></script> 
</head> 
<body ng-app="starter"> 

<div ui-view></div> 

<script id="login.html" type="text/ng-template"> 
    l 
</script> 

<script id="welcome.html" type="text/ng-template"> 
    w 
</script> 
</body> 
</html> 

JS :

angular.module('starter', ['ui.router']) 

.run(["$rootScope", "$state", function($rootScope, $state) { 
    $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) { 
     if (error === "nope") { 
      $state.go("login"); 
     } 
    }); 
}]) 

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

    $stateProvider 
     .state('welcome', { 
      url: '/welcome', 
      templateUrl: 'welcome.html', 
      resolve: { 
       "auth": ["$q", function($q) { 
        return $q.reject("nope"); 
       }] 
      } 
     }) 

     .state('login', { 
      url: '/login', 
      templateUrl: 'views/login.html' 
     }) 
}); 

은 "보기/login.html은"단지 "VL"는이 화면에 표시 볼 포함 여기서 코드이다. 그래서, 위의 코드가 실행되는 경우, 출력은 크롬 콘솔 보면 훌륭하지만 : 당신이 JS를 수정하고 대체 할 경우 지금

crazy error

, 그것의 미친 부분입니다

templateUrl: 'views/login.html' 
단순히

templateUrl: 'login.html' 

되는 HTML에 정의 NG 템플릿을 이용하여 상기 로그인 상태

모든 좋다! 그래서 글쎄요, 파일을 템플릿으로 사용하는 것은 일부 감시자를 트리거해야한다고 생각합니다 ... 글쎄요, 저는 아이디어가 없습니다.

도움을 주셔서 감사합니다.

[편집]

여기에 도움이 될 두 가지이다 :

  • 는 오류가 없다 UI 라우터 대신에 ngRoute을 사용하는 경우
  • 와 각도 버전을 대체하는 경우, 오류가 없습니다
  • 1.2.25

그래서 UI 라우터와 각도 1.3의 버그라고 생각합니다. 그러나 그것을 해결하기 위해 무엇을해야할지 전혀 모릅니다.

답변

3

$state.go()으로 전화하기 전에 event.preventDefault()으로 전화해야합니다.

는 여기를 참조하십시오 : http://plnkr.co/edit/eUosIpdN7adJFxfDo3kV?p=preview

당신이 이미 확인 된 것처럼이 오류가 발생하는되는 주된 이유는, 템플릿 URL 'views/login.html'이 exsit하지 않습니다. 템플릿 URL을 'views/login.html'에서 'login.html'으로 변경하면 모든 것이 효과가 있으며 템플릿이 존재하기 때문에 이것이 의미가 있다고 말했습니까?

당신이 소화 무한 오류가 표시되는 이유는 당신이 welcome 상태를 사용할 때마다이 auth 해결 당신은 너무 그것을 기대처럼 $stateChangeError 이벤트를 트리거 오류를 던지고 있다는 점이다. login 상태로 가려고 할 때까지 모든 것이 잘됩니다. 템플릿 URL이 'views/login.html'이 아니기 때문에 login 상태로 전환하려고 시도하면이 오류로 인해 otherwise 리디렉션이 발생하여 welcome 상태로 되돌아갑니다. 이 시점에서 welcome 상태로 다시 돌아 오면 전체주기가 다시 시작되고 무한 다이제스트 루프가 발생 함을 알 수 있습니다.

템플릿 URL이 올바른지 확인하기 만하면 이미 발견했기 때문에 발생하지 않습니다.

+0

안녕하세요, 답변을 시도해 주셔서 감사하지만 아니요, 템플릿은 실제로 존재합니다. 제가 쓴 것처럼,이 텍스트에는 임의의 텍스트가 포함되어 있습니다. 또한이 코드는 "views/login.html"에있는 것을 마지막으로 표시하지만 그 전에는 다이제스트주기를 여러 번 반복합니다. 템플릿이 파일 일 때만, 인라인 ng 템플릿 인 경우 나는 모든 것이 좋습니다. –

+1

나는 그것을 이해했다. 내 편집을 참조하십시오. – lukewestby

+0

니스! 그러나 당신은 어떤 생각을 가지고 있습니까? –

1

저도 같은 문제가 있었 내 전체 페이지를 붙여 아래 당신이 모든 이 '엄격한 사용'함께 작동하는 방법을 볼 수 있도록 내가

.run(function($rootScope, $state) { 
     $rootScope.$on('$stateChangeError', function() { 
      // Redirect user to our login page 
      $state.go('auth.login'); 
     }); 
     }); 

를 해결하는 방법이있다;

angular.module('mean.pdash').config(['$stateProvider', 

function($stateProvider) { 
    // Check if the user is connected 
    var checkLoggedin = function($q, $timeout, $http, $location) { 
    // Initialize a new promise 
    var deferred = $q.defer(); 
    $http.get('/loggedin').success(function(user) { 
     // Authenticated 
     console.log(user); 
     if (user !== '0') { 
     $timeout(deferred.resolve); 
     } else { 
     $timeout(deferred.reject); 
     } 
    }); 

    return deferred.promise; 
    }; 
    $stateProvider.state('pdash', { 
    url: '/', 
    templateUrl: 'pdash/views/index.html', 
    controller: 'PdashController', 
    resolve: { 
     checkLoggedin: checkLoggedin 
    } 
    }); 
} 
]) 
    .run(function($rootScope, $state) { 
    $rootScope.$on('$stateChangeError', function() { 
     // Redirect user to our login page 
     $state.go('auth.login'); 
    }); 
    });