Angular View automatically redirecting to default (otherwise) view

Question

My view is automatically redirecting to default (otherwise) view and I have no idea why. When I click, it goes from View1 to View2 and then automatically redirects to default View3. I checked by putting console.log() in View2

View1 -> View2 -> View3

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('view1', {
            url: "/view1",
            templateUrl: "App/Views/start/view1.html",
            controller: 'MyController'
        })
        .state('view2', {
            url: "/view2/:details",
            templateUrl: "App/Views/start/view2.html",
            controller: 'MyController'
        });
     $urlRouterProvider.otherwise('/view3');
    });

And I am calling $state.go like this.

$state.go('view2', { details: JSON.stringify(response.details) });

I tried to intercept it by preventing default on $stateChangeStart but ran into an error :

$digest() iterations reached. aborting

which is due to an interaction issue between $urlRouterProvider and $stateProvider as explained here. But even if I intercept it successfully, I am not sure if that's the correct way. So what is actually causing it? Or How can I find out what's causing the redirect. By the way I have already checked for $stateChangeError and there are none.

myApp.controller('MyController', ['$scope', '$stateParams', '$state', function ($scope, $stateParams, $state) {
 $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    if (toState.name == "view3" && fromState.name == "view2") {
        event.preventDefault();
    }
 });
});

Answer 1

I think your response.details has non-url encoded characters making the route provider think that you are navigating to a deeper page i.e. var response = {details:'bar/foo'}; would in effect be navigating to /view2/bar/foo triggering your otherwise.

Answer 2

This is kind of a shot in the dark, but try putting your $urlRouterProvider before the $stateProvider. I think that what could be happening is that the $urlRouterProvider.otherwise() is acting as a catch all with a watcher, but by the time it is in scope all of the routes have already been run through. This means that even if the $stateProvider works and sends a request to the correct URL, the $urlRouterProvider.otherwise() will catch the request as if that didn't happen and will send it to the default page.

Answer 3

If I understand your question, you want to know where to debug first. I recommend adding a console.log for your response.details, since you aren't providing that in your question.

I do not believe this is an order of operations issue in your definition because you say this is happening on click, when you call $state.go(). At the moment that you do that, the router will attempt to find and quality the state you've requested. Since your state has a URL, it will also try to send the user to that URL, using the parameters you've provided.

Since your failure is happening at that point, the most logical explanation is that your target route is not reachable, or the router thinks it isn't. Since your route includes a parameter, this most likely means the router is not accepting your parameter - this path is set up to have that parameter be required, so if it is not there (or isn't passing validation), you'll trigger .otherwise().

You can rule this out very easily by simply removing the parameter from state2's URL. Of course you want it, but if removing it allows you to reach the state then it is the parameter. If removing it still doesn't allow you to get there, it's something else and you will need to set a breakpoint inside the $state.go() call and trace out where it's rejecting you. Make sure you use the un-minified files while doing this.