.state("venues", { abstract: false, url:"/venues", templateUrl:"tpl1"templates/venues.html", //redirectTo: 'venues.all', controller: "venuesController" }) .state("venues.all", { url:"/all", templateUrl:"tpl2"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:"tpl3"templates/venues_partials/selected_venue.html", controller: "venuesVenueController", //redirectTo: 'venues.venue.overview', params: {picker: null} }) .state("venues.venue.overview", { url:"/overview", templateUrl:"tpl4"templates/venues_partials/selected_venue_partials/overview.html", controller: "venuesVenueOverviewController" }) .state("venues.venue.categories", { url:"/categories", templateUrl:"tpl5"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" }) .state("venues", { abstract: false, url:"/venues", templateUrl:"tpl1.html", //redirectTo: 'venues.all', controller: "venuesController" }) .state("venues.all", { url:"/all", templateUrl:"tpl2.html", controller: "venuesAllController", }) .state("venues.venue", { url:"/venue/:id", templateUrl:"tpl3.html", controller: "venuesVenueController", }) .state("venues.venue.overview", { url:"/overview", templateUrl:"tpl4.html", controller: "venuesVenueOverviewController" }) .state("venues.venue.categories", { url:"/categories", templateUrl:"tpl5.html", controller: "venuesVenueCategoriesController" }) .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" }) Here's an example of my state configuration:
.state("venues", { abstract: false, url:"/venues", templateUrl:"tpl1.html", //redirectTo: 'venues.all', controller: "venuesController" }) .state("venues.all", { url:"/all", templateUrl:"tpl2.html", controller: "venuesAllController", }) .state("venues.venue", { url:"/venue/:id", templateUrl:"tpl3.html", controller: "venuesVenueController", }) .state("venues.venue.overview", { url:"/overview", templateUrl:"tpl4.html", controller: "venuesVenueOverviewController" }) .state("venues.venue.categories", { url:"/categories", templateUrl:"tpl5.html", controller: "venuesVenueCategoriesController" }) 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> Here's an example of my state configuration:
.state("venues", { abstract: false, url:"/venues", templateUrl:"tpl1.html", //redirectTo: 'venues.all', controller: "venuesController" }) .state("venues.all", { url:"/all", templateUrl:"tpl2.html", controller: "venuesAllController", }) .state("venues.venue", { url:"/venue/:id", templateUrl:"tpl3.html", controller: "venuesVenueController", }) .state("venues.venue.overview", { url:"/overview", templateUrl:"tpl4.html", controller: "venuesVenueOverviewController" }) .state("venues.venue.categories", { url:"/categories", templateUrl:"tpl5.html", controller: "venuesVenueCategoriesController" }) 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> 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).
default