AngularJS ui-router state change

Question

I have a rather weird problem. I am at a certain state in my app, and when I click on a link to transition to another state, only the $stateChangeStart is called, nothing else. I am logging all other functions: $stateNotFound, $stateChangeError, $stateChangeSuccess and none of them are called.

Here's my $stateChangeStart function:

$rootScope.$on('$stateChangeStart', function(evt, to, params) {
        console.log(to)
        console.log(evt)
        console.log(params);
 });

And the output is:

app.js:xx Object {url: "/area/:id", templateUrl: "something.html", controller: "venuesAreaController", params: Object, name: "venues.area"} controller: "venuesAreaController" name: "venues.area" params: Object templateUrl: "something1.html" url: "/area/:id" __proto__: Object
app.js:xx Object {name: "$stateChangeStart", targetScope: l, defaultPrevented: false, currentScope: l}

Basically it's behaving like any state change event called with $state.go(), but only the start function is called. I am puzzled. Where do I begin fixing this? (Note that this only happens on the first click anywhere after I visit the page directly with some nested states in the URL, when I navigate the page normally all is well).

Here's an example of my state configuration:

    .state("venues", {
        abstract: false,
        url:"/venues",
        templateUrl:"templates/venues.html",
        //redirectTo: 'venues.all',
        controller: "venuesController"
    })
        .state("venues.all", {
            url:"/all", templateUrl:"templates/venues_partials/all_areas.html",
            controller: "venuesAllController",
            params: {picker: null}
        })
        .state("venues.area", {
            url:"/area/:id",
            templateUrl:"templates/venues_partials/selected_area.html",
            controller: "venuesAreaController",
            params: {picker: null}
        })
        .state("venues.venue", {
            url:"/venue/:id", templateUrl:"templates/venues_partials/selected_venue.html",
            controller: "venuesVenueController",
            //redirectTo: 'venues.venue.overview',
            params: {picker: null}
        })
            .state("venues.venue.overview", {
                url:"/overview", templateUrl:"templates/venues_partials/selected_venue_partials/overview.html",
                controller: "venuesVenueOverviewController"
            })
            .state("venues.venue.categories", {
                url:"/categories", templateUrl:"templates/venues_partials/selected_venue_partials/category_performance.html",
                controller: "venuesVenueCategoriesController"
            })
            .state("venues.venue.problems", {
                url:"/problems", templateUrl:"templates/venues_partials/selected_venue_partials/problem_management.html",
                controller: "venuesVenueProblemsController"
            })
            .state("venues.venue.reviews", {
                url:"/reviews", templateUrl:"templates/venues_partials/selected_venue_partials/review_history.html",
                controller: "venuesVenueReviewsController"
            })
            .state("venues.venue.information", {
                url:"/information", templateUrl:"templates/venues_partials/selected_venue_partials/venue_information.html",
                controller: "venuesVenueInformationController"
            })

My main menu is done with regular links, the other two nested states are done with bootstrap's tabset:

<tabset>
    <tab
        ng-repeat="(index, t) in tabs"
        heading="{{t.heading}}"
        select="go(t.route, t.params)"
        active="t.active">
        <div ng-if="t.active" ui-view></div>
    </tab>
</tabset>

Can you show the state definitions?

BBauer42
– BBauer42

2016-02-22 15:17:03 +00:00
Commented Feb 22, 2016 at 15:17 — BBauer42
– BBauer42, Commented Feb 22, 2016 at 15:17
I've edited my answer

xtrinch
– xtrinch

2016-02-22 17:17:08 +00:00
Commented Feb 22, 2016 at 17:17 — xtrinch
– xtrinch, Commented Feb 22, 2016 at 17:17
can you show a url example?

koox00
– koox00

2016-02-23 14:24:53 +00:00
Commented Feb 23, 2016 at 14:24 — koox00
– koox00, Commented Feb 23, 2016 at 14:24
this also looks weird targetScope: l

koox00
– koox00

2016-02-23 14:30:39 +00:00
Commented Feb 23, 2016 at 14:30 — koox00
– koox00, Commented Feb 23, 2016 at 14:30

Eigi · Accepted Answer · 2016-02-22 19:00:47Z

1

Please fix the errors and give it a try, e.g.

.state("venues.all", {
            url:"/all", templateUrl:"tpl2.html",
            controller: "venuesAllController",
        })

Won't work, you have to remove the second ','. It sounds like a compile-error (there are also hidden errors, which are not shown in the console). Check them and reanswer if weird states still happen.

answered Feb 22, 2016 at 19:00

Eigi

7168 silver badges23 bronze badges

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

4 Comments

xtrinch Over a year ago

Silly me removing pieces of code that seemed uneccessary for the question and forgetting the ','. There were some parameters that I deleted, e.g. params: {date: null}

Eigi Over a year ago

Just post the full code. Compile-errors in ui router are pain, because you don't find them :D

koox00 Over a year ago

@CodeNashor, the trailing comma isn't an error in javascrippt, as far as I know, also if you look at $stateChangeError you can log ui-router errors even if it fails silent.

Eigi Over a year ago

It should fail, because the state is invalid declared and most of the router/ui-router errors fail silent in these cases.

xtrinch · Accepted Answer · 2016-02-23 15:01:10Z

0

It seems that the ng-if in the tabset was the problem. I used ng-show and now all the clicks are working.

<div ng-if="t.active" ui-view></div>

answered Feb 23, 2016 at 15:01

xtrinch

2,3012 gold badges26 silver badges47 bronze badges

Collectives™ on Stack Overflow

AngularJS ui-router state change

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related