AngularJS ui.router parent controller trigger

Question

I have a complex ui.state set up that for url ease I take users to a 'base' subpage url and then provide tabs to filter content on the page. For example:

/page/unique-page-slug <- 'base' subpage url

/page/unique-page-slug/popular <- filtered content subpage url

the issue im encountering is that despite having a controller on each state i cant seem to trigger 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 a plunkr example. Note, that when i go to route 1 it logs 'parent triggered', then go to a sub state i get 'child triggered', when i go back to the parent i dont get anything triggered, but upon re-entering the sub state it retriggers 'child state'

What i am trying to do is have it trigger 'parent triggered' when i go back to the parent state.

Rohan Büchner · Accepted Answer · 2014-08-15 08:53:50Z

1

One option is that you could create a shell controller, and make use of .transitionTo and set { 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 });
      }
 }]);

Updated example: http://plnkr.co/edit/J8Y02IBeExNMVUi9y7Cx?p=preview

To be honest I wasn't aware of .transitionTo before reading this question. But I found it on the github angular forum here

I think the original issue is that you never really transition away from route1 when you go to a sub route. Thus the controller code wont get re-bound unless you do something to explicitly re-run it. In this case, forcing the reload.

edited Aug 15, 2014 at 8:53

answered Aug 15, 2014 at 8:41

Rohan Büchner

5,4035 gold badges67 silver badges108 bronze badges

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

3 Comments

haxxxton Over a year ago

grah, forcing a reload is super undesirable, thanks for the answer though, i wasnt aware of transitionTo either. Im wondering if the same method could be used though to monitor when you leave a route and fire something then?

Rohan Büchner Over a year ago

Ah yes, that seems like it would be ideal. I'll have a look in the docs some more

haxxxton Over a year ago

i managed to find a hack around where i added a click handler to each of my 'tabs' that changed a $watched variable, this allowed me to trigger a callback each time the route changes. Because im going for a non-refresh solution, i also added the changed variables at the instantiation of each of the controllers too. This should mean that the callback is fired on all ways that the pages are accessed, i think

Collectives™ on Stack Overflow

AngularJS ui.router parent controller trigger

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related