AngularJS ui.router parent controller switch
I have a complex ui.state set up so that to simplify the URL, I take users to the "base" URL of the subpage, and then provide tabs to filter the content on the page. For example:
/page/unique-page-slug
Subpage url
/page/unique-page-slug/popular
Filtered Subpage URL
the problem being faced is that despite having a controller in every state that doesn't seem to fire when the states change after the first time.
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html",
controller: function($scope){
console.log('parent triggered');
}
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope){
$scope.items = ["A", "List", "Of", "Items"];
console.log('child triggered');
}
})
})
Heres is an example of plunkr . Note that when I go to route 1, it registers the "parent trigger" and then transitions to the slave state. I get a "child" when I go back to the parent I don't get anything called but after re-entering the sub-state it regenerates the "child state"
What I am trying to do is call a "parent launch" when I return to the parent state.
source to share
One option is that you can create a wrapper controller and use .transitionTo
and install { reload: true }
?
Markup
<div class="navbar" ng-controller="shell">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a href="#" ng-click="go('route1')">Route 1</a></li>
</ul>
</div>
</div>
controller
.controller('shell', ['$state','$scope',function($state, $scope) {
$scope.go = function(route) {
$state.transitionTo(route, { param1 : 'something' }, { reload: true });
}
}]);
Example: http://plnkr.co/edit/J8Y02IBeExNMVUi9y7Cx?p=preview
To be honest, I was not aware of .transitionTo
before reading this question. But I found it on the angular github forum here
I think the original problem is that you never go from route1 when you go to sub. This way, the controller code will not be re-bindable unless you do something to explicitly re-run it. In this case, a forced reboot.
source to share