CODEWITHSUNDEEP
angularjsangular-ui-router
ps0604
ps0604

Reputation: 1071

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

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");
              });

          }
    });

});

Upvotes: 3

Views: 2268

Answers (1)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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!

Upvotes: 1

Related Questions