CODEWITHSUNDEEP
angularjsangular-ui-router
xtrinch
xtrinch

Reputation: 2281

AngularJS ui-router state change

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>

Upvotes: 0

Views: 394

Answers (2)

xtrinch
xtrinch

Reputation: 2281

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>

Upvotes: 0

Eigi
Eigi

Reputation: 716

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.

Upvotes: 1

Related Questions