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-05T05:31:53.993

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 05 '17 at 05:31

answered Dec 26 '14 at 21:50

Shashank Agrawal

25,161
11
89
121

[look at this plunk](http://plnkr.co/edit/ZofkENTZPzajQ8ET8IKC?p=preview), stateChangeStart notifies other states that an event started, not to the event itself – ps0604 Dec 26 '14 at 21:59
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: http://plnkr.co/edit/6kimGOWlO5LvU5bTcQuH?p=preview – Shashank Agrawal Dec 26 '14 at 22:06
1

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. – ps0604 Dec 26 '14 at 22:11
3

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. – Shashank Agrawal Dec 26 '14 at 22:16

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

1 Answers1