Angular ui.router executing more than one state

Question

I'm using AngularUI's router library and I have a strange issue: I have two distinct but similar states and controllers. What occurs is the state that I would expect runs, but then another state appears to run: it fetches the templateUrl and then the controller runs for the second state, which causes some weird behavior.

The states in question:

angular.module('app', ['ui.route'])
.config(function ($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise("/");

    $stateProvider
    .state('list', {
        url: "/",
        templateUrl: STATIC_URL + "js/eleagemot/views/list.html",
        controller: 'questionListCtrl',
    })
    .state('detail', {
        url: '/{username:[a-zA-Z0-9\\-]+}/{slug:[a-z0-9\\-]+}/',
        templateUrl: STATIC_URL + "js/eleagemot/views/detailed_question.html",
        controller: 'questionDetailCtrl'
    })
    .state('newQuestion', {
        url: '/new-question/',
        templateUrl: STATIC_URL + "js/eleagemot/views/edit_question.html",
        controller: 'editQuestion'
    })
    .state('questionEdit', {
        url: '/{username:[a-zA-Z0-9\\-]+}/{slug:[a-z0-9\\-]+}/edit/',
        templateUrl: STATIC_URL + "js/eleagemot/views/edit_question.html",
        controller: 'editQuestion'
    })
    .state('answerEdit', {
        url: '/answer/{id:[0-9]+}/edit/',
        templateUrl: STATIC_URL + "js/eleagemot/views/edit_answer.html",
        controller: "editAnswer"
    })
});

Exactly what happens is if I go to /answer/1/edit/ it first loads the edit_answer.html template and runs the editAnswer controller, as it should. But then it also loads the edit_question.html template and runs the editQuestion controller. I know because there's some Restangular code that runs correctly in the editAnswer controller and then some similar Restangular code that runs in the editQuestion controller, but that causes a 404 and then the router redirects to the root. Also putting some console logs at the top of each controller shows that the editAnswer controller runs and then the editQuestion controller.

This behavior is only seen when loading the url for the answerEdit state, and not for any of the other states. Why is this happening and how can I fix it?

You should probably post your editAnswer controller so we can look at that too. It's possible that it could be causing the problem. — Matthias
– Matthias, Commented Jan 21, 2014 at 21:52

Thane Brimhall · Accepted Answer · 2014-01-21 21:54:12Z

2

Looks like you've got some regular expressions that match too easily. Note that /answer/{id:[0-9]+}/edit/ always matches the above url pattern: '{username:[a-zA-Z0-9\\-]+}/{slug:[a-z0-9\\-]+}/edit/

answered Jan 21, 2014 at 21:54

Thane Brimhall

9,5757 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cellofellow Over a year ago

Ah, thanks. I've added '/question' in front of the ones that are for questions.

Collectives™ on Stack Overflow

Angular ui.router executing more than one state

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related