Avoid triggering child states in ui-router

Question

Avoid triggering child states in ui-router

Here is the progress I have made with ui-router states:

$stateProvider
  .state('tools', {
    url: '/tools/:tool',
    template: '<div ui-view=""></div>',
    abstract: true,
    onEnter: function ($stateParams, $state, TOOL_TYPES) {
      if (TOOL_TYPES.indexOf($stateParams.tool) === -1) {
        $state.go('error');
      }
    }
  })
  .state('tools.list', {
    url: '',
    templateUrl: 'app/tools/tools.tpl.html',
    controller: 'ToolsController'
  })
  .state('tools.view', {
    url: '/:id/view',
    templateUrl: 'app/tools/partials/tool.tpl.html',
    controller: 'ToolController'
  });

The parent state requires parameter tool, which must be included in the TOOL_TYPES array. If not available, the user will be redirected to the error page.

Although everything functions correctly, I am encountering two errors:

TypeError: Cannot read property '@' of null

TypeError: Cannot read property '@tools' of null

It seems that the child states are being triggered regardless. Is there a way to prevent this or achieve my desired outcome differently?

javascript angularjs angular-ui-router

Answer 1

Answer №1

The documentation for Angular ui-router explains that the onEnter callbacks are triggered when a state becomes active, thereby activating child states as well.

To address this issue, it is necessary to implement two key steps:

Create a resolve function that returns a rejected promise if a specific condition does not match the state requirements. Ensure that the rejected promise includes information about the state to redirect to.
Develop a $stateChangeError event handler within the $rootScope and utilize the 6th parameter which represents the information passed in the rejected promise. Use this information to create the redirection functionality.

See Demo Here

Javascript

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

  .value('TOOL_TYPES', [
    'tool1', 'tool2', 'tool3'
  ])

  .config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

      .state('error', {
        url: '/error',
        template: 'Error!'
      })

      .state('tools', {
        url: '/tools/:tool',
        abstract: true,
        template: '<ui-view></ui-view>',
        resolve: {
          tool_type: function($state, $q, $stateParams, TOOL_TYPES) {

            var index = TOOL_TYPES.indexOf($stateParams.tool);

            if(index === -1) {
              return $q.reject({
                state: 'error'
              });
            }

            return TOOL_TYPES[index];
          }
        }
      })

      .state('tools.list', {
        url: '',
        template: 'List of Tools',
        controller: 'ToolsController'
      })
      .state('tools.view', {
        url: '/:id/view',
        template: 'Tool View',
        controller: 'ToolController'
      });

  })

  .run(function($rootScope, $state) {
    $rootScope.$on('$stateChangeError', function(
      event, toState, toStateParams, 
      fromState, fromStateParams, error) {

        if(error && error.state) {
          $state.go(error.state, error.params, error.options);
        }

    });
  })

  .controller('ToolsController', function() {})
  .controller('ToolController', function() {});

Answer 2

The documentation for Angular ui-router explains that the onEnter callbacks are triggered when a state becomes active, thereby activating child states as well.

To address this issue, it is necessary to implement two key steps:

Create a resolve function that returns a rejected promise if a specific condition does not match the state requirements. Ensure that the rejected promise includes information about the state to redirect to.
Develop a $stateChangeError event handler within the $rootScope and utilize the 6th parameter which represents the information passed in the rejected promise. Use this information to create the redirection functionality.

See Demo Here

Javascript

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

  .value('TOOL_TYPES', [
    'tool1', 'tool2', 'tool3'
  ])

  .config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

      .state('error', {
        url: '/error',
        template: 'Error!'
      })

      .state('tools', {
        url: '/tools/:tool',
        abstract: true,
        template: '<ui-view></ui-view>',
        resolve: {
          tool_type: function($state, $q, $stateParams, TOOL_TYPES) {

            var index = TOOL_TYPES.indexOf($stateParams.tool);

            if(index === -1) {
              return $q.reject({
                state: 'error'
              });
            }

            return TOOL_TYPES[index];
          }
        }
      })

      .state('tools.list', {
        url: '',
        template: 'List of Tools',
        controller: 'ToolsController'
      })
      .state('tools.view', {
        url: '/:id/view',
        template: 'Tool View',
        controller: 'ToolController'
      });

  })

  .run(function($rootScope, $state) {
    $rootScope.$on('$stateChangeError', function(
      event, toState, toStateParams, 
      fromState, fromStateParams, error) {

        if(error && error.state) {
          $state.go(error.state, error.params, error.options);
        }

    });
  })

  .controller('ToolsController', function() {})
  .controller('ToolController', function() {});

Avoid triggering child states in ui-router

Answer №1

Similar questions

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

.ajax() triggers a page refresh upon pressing the ENTER key

Looping through an object with AngularJS's ng-repeat

Creating code in AngularJS

Unable to Trigger Virtual Click Event on Calendar in JavaScript

What is the best way to pass a value to a modal and access it within the modal's component in Angular 8?

Method in Vue.js is returning an `{isTrusted: true}` instead of the expected object

Error: JQuery's on() function is not defined

The Socket IO server fails to broadcast a message to a designated custom room

Organizing AngularJS Data by Initial Letter with the <select></select> HTML Element

Tips for transferring a data table (an object) from a JavaScript file to Node.js

Iterating through a for loop in Angular2 to send multiple GET requests to a Django backend

What is Angular's approach to managing the @ symbol in view paths?

The accuracy of real-time visitor numbers in Google Analytics is often unreliable

I'm looking for a solution to pass a PHP object as a parameter in JavaScript within an HTML environment,

Implementing Conditional ng-src Loading based on a Given Value

TinyMCE - Utilizing selection.setContent along with getContent for the Warp Button

URLs embedded in a JSON string

Using the input method in JavaScript cannot extract an object property

Creating a C# view model with jQuery integration