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

Retrieve the minimum and maximum values from a multi-dimensional array

Implement a callback function in React using hooks after changing the state

javascript Unable to execute function in Internet Explorer 11

Unable to extract a particular value from a JSON data structure

Tips on incorporating personalized javascript functions into Durandal

obtain data from JSON using JavaScript

Utilize the Webstorm debugger in conjunction with node.js for seamless debugging

What is the best way to reorganize the switch case in order to invoke methods from a class?

Is there a way to create a Captcha image from text using JavaScript in an HTML document?

Having trouble accessing the scrollHeight property of null when using Selenium WebDriver

Automatically compile files while performing an npm install or update

Stop user from navigating to specific route using React-router

Can VueJS Computed handle multiple filters at once?

The 'npm start' command is failing to recognize the changes made to the

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

Different types of video formats used for html5 video players

"Unlocking the Power of jQuery: A Guide to Accessing XML Child

How to resolve CORS error when using custom request header in Django with JavaScript and redirecting to OPTIONS request?

Having trouble getting the toggle button JavaScript code to function properly in React JS?

What is preventing me from being able to effectively transmit the array using the POST method in Express?