AngularJS ui-router: receive an event every time a user goes to a state

Question

I need to receive an event in AngularJS ui-router when the user goes to a state, even when they go to that state twice in a row (i.e. clicking the same url twice). For example, in this plunk, you will only be notified the first time you click on the url or when you click on a different url. If you click on the same url twice, you won't see the alert message.

I need the event to be fired every time the user clicks on a link, regardless. Couldn't find a ui-router event, any ideas?

HTML:

   <a href="#" ui-sref="page1">Populate page 1</a>
   <a href="#" ui-sref="page2">Populate page 2</a>

   <br/><br/>

   <div ui-view></div>

Javascript:

angular.module("app", ['ui.router']);

function MyCtrl($scope) {}

angular.module("app").
config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('page1', {
          templateUrl: 'page1.html',
          controller: function($scope) {

              $scope.$on("$viewContentLoaded", function(){
                  alert("$viewContentLoaded - 1");
              });

          }
    })
    .state('page2', {
          templateUrl: 'page2.html',
          controller: function($scope) {

              $scope.$on("$viewContentLoaded", function(){
                     alert("$viewContentLoaded - 2");
              });

          }
    });

});

Shashank Agrawal · Accepted Answer · 2017-01-05 05:31:53Z

1

Here you go:

myAppModule.controller('SomeBaseController', function($scope) {

    // called when any state changes.
    $scope.$on('$stateChangeStart', function(event, toState, toParams) {

         // call event.preventDefault() to prevent from transition.
    });
});

Reference: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

Plunkr: http://plnkr.co/edit/6kimGOWlO5LvU5bTcQuH?p=preview

Hope this helps!

edited Jan 5, 2017 at 5:31

answered Dec 26, 2014 at 21:50

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

4 Comments

ps0604 Over a year ago

look at this plunk, stateChangeStart notifies other states that an event started, not to the event itself

Shashank Agrawal Over a year ago

Hey @ps0604, you are registering the listener for a controller specific to the states which get destroyed when that page removed. So you need to set that event listener to parent scope i.e in your MyCtrl scope. I've updated the plunker, have a look: plnkr.co/edit/6kimGOWlO5LvU5bTcQuH?p=preview

ps0604 Over a year ago

thanks, but in your plunk I only get the notification when the state changes, if you click the same link twice, the second time you don't see the alert. I need to see the alert every time the user clicks on a link.

Shashank Agrawal Over a year ago

If a state is already active and if you try to again transition to same state then it does not allows you to transition. So you have to manually reload the state. You have to use ui-sref-opts="{reload: true}". Look at the same plunkr. I've updated the solution.

Collectives™ on Stack Overflow

AngularJS ui-router: receive an event every time a user goes to a state

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related