Double triggering of $stateChangeStart event in Angular UI Router (extras)

Question

Double triggering of $stateChangeStart event in Angular UI Router (extras)

I'm having trouble understanding why the addition of Angular UI Router Extras causes the $stateChangeStart event to trigger twice (on init!) in a situation where I have some asynchronous ajax check and call e.preventDefault().

Here is a short example of the event code:

 $rootScope.$on("$stateChangeStart", function (e, toState, toParams, fromState, fromParams, error) {
       console.log("$stateChangeStart");//fired twice
       if(!User.data) {
             e.preventDefault();
             $http.get("https://randomuser.me/api/")
             .success(function(data, status, headers, config) {
                  console.log(data);
                  User.data = data; 
                  $state.go(toState, toParams);
              });
       }              
 });

Here's the full FIDDLE Example

Everything works as expected without using the extras addition.

Thank you!

javascript angularjs ajax angular-ui-router angular-ui-router-extras

Answer 1

Answer №1

Angularjs undergoes multiple checks in its digest cycle to examine changes before and after, which might be a part of that cycle.

This behavior can be observed when using $watch.

$scope.$watch('myVariable', function(change) {
  if (!change) { return; }
  // perform important tasks here.
});

During the initial round of the digest cycle, the change parameter will initially be undefined, until myVariable is assigned a value elsewhere. Once myVariable gets set somewhere else, the $watch function will trigger again and bypass the if block to execute actual work.

If this scenario applies to your code, you may consider adding an if block to exit the function if any of your parameters are undefined or hold values on which you do not wish to act upon.

$rootScope.$on("$stateChangeStart", function(e, toState, toParams, fromState, fromParams, error) {

  if (!e || !toStateForExample || anotherParameter) { return; }

  console.log("$stateChangeStart"); // triggered twice
  if (!User.data) {
    e.preventDefault();
    $http.get("https://randomuser.me/api/")
      .success(function(data, status, headers, config) {
        console.log(data);
        User.data = data;
        $state.go(toState, toParams);
      });
  }
});

Answer 2

Angularjs undergoes multiple checks in its digest cycle to examine changes before and after, which might be a part of that cycle.

This behavior can be observed when using $watch.

$scope.$watch('myVariable', function(change) {
  if (!change) { return; }
  // perform important tasks here.
});

During the initial round of the digest cycle, the change parameter will initially be undefined, until myVariable is assigned a value elsewhere. Once myVariable gets set somewhere else, the $watch function will trigger again and bypass the if block to execute actual work.

If this scenario applies to your code, you may consider adding an if block to exit the function if any of your parameters are undefined or hold values on which you do not wish to act upon.

$rootScope.$on("$stateChangeStart", function(e, toState, toParams, fromState, fromParams, error) {

  if (!e || !toStateForExample || anotherParameter) { return; }

  console.log("$stateChangeStart"); // triggered twice
  if (!User.data) {
    e.preventDefault();
    $http.get("https://randomuser.me/api/")
      .success(function(data, status, headers, config) {
        console.log(data);
        User.data = data;
        $state.go(toState, toParams);
      });
  }
});

Double triggering of $stateChangeStart event in Angular UI Router (extras)

Answer №1

Similar questions

How can we avoid animations being interrupted by user interaction?

React Link updates the browser's URL without refreshing the page, yet fails to display any new content

The proper method for clearing out all items from the environment

Whoops! Unable to interpret properties from an undefined source while trying to retrieve 'get'

How to set the default value of a dropdown list created using ng-repeat in AngularJS

Interacting with the header component within the renderHeader property of the MUI Data Grid Pro will update the sortModel

Export buttons in Jquery datatable are malfunctioning

Is it possible to identify users using an iPhone while they are utilizing "Private Browsing" mode?

Managing the sequence of module loading in NodeJS

The material-table component in React seems to have trouble displaying data when using the onRowAdd function, but at least the state

Using Google App Script's pageToken to store attachments on Google Drive

Get immediate results in real-time

Issue with inability to clear text in popup upon closure by jQuery

Discovering the selected option's value in a dropdown and utilizing it to search through an array for data to fill another input

Tips for passing props while clicking on a v-data-table:

A guide on implementing dynamic ng-models in Angular

Preventing the JSF form from automatically scrolling to the top of the screen following an AJAX request

The active class in the Bootstrap carousel is not updating when trying to change

I am attempting to set up a file download feature, but every file I download ends up either being corrupted in the case of images or empty for PDFs

Top method for triggering an action on the client-side during Sign In with the help of Redux, React, and NextAuth