CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-router
cellofellow
cellofellow

Reputation: 437

Angular ui.router executing more than one state

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?

Upvotes: 2

Views: 181

Answers (1)

Thane Brimhall
Thane Brimhall

Reputation: 9555

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/

Upvotes: 2

Related Questions