AngularJS Move to nested abstract view

Question

I have nested abstract view in my angular js project.
I got Error : Cannot transition to abstract state 'main.middle' when i move to nested abstract view.
My html code is as below:

<!DOCTYPE html>
<html ng-app="nesting">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="testController">
    href:
    <br /> 
    <a href="#/alpha">#/alpha</a>
    <a href="#/beta">#/beta</a>
    <a href="#/gama">#/gama</a>
    <button ng-click="moveToMiddle()">move to middle</button>
    <br />
    ui-sref:
    <br /> 
    <a ui-sref="main.middle.alpha">main.middle.alpha</a>
    <a ui-sref="main.middle.beta">main.middle.beta</a>
    <a ui-sref="main.middle.gama">main.middle.gama</a>

    <hr />
    <div ui-view=""></div>

    <script>

      'use strict';

      var $urlRouterProviderRef = null;
      var $stateProviderRef = null;

      var app = angular.module('nesting', [
        'ui.router'
      ]);

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

          $urlRouterProvider.otherwise('/alpha');


          $stateProvider
            .state('main', {
                url: "",
                abstract: true,
                template: '<div><h3>Main</h3><div ui-view=""></div></div>',
            })
            .state('main.middle', {
                url: "",
                abstract: true,
                template: '<div><h4>Middle</h4><div ui-view=""></div></div>',
            })
            .state('main.middle.alpha', {
                url: "/alpha",
                template: '<div><h5>The leaf: {{state.name}}</h5></div>',
                controller: function ($scope, $state){
                  $scope.state = $state.current;
                },
            })
            .state('main.middle.beta', {
                url: "/beta",
                template: '<div><h5>The leaf: {{state.name}}</h5></div>',
                controller: function ($scope, $state){
                  $scope.state = $state.current;
                },
            })
            .state('main.middle.gama', {
                url: "/gama",
                template: '<div><h5>The leaf: {{state.name}}</h5></div>',
                controller: function ($scope, $state){
                  $scope.state = $state.current;
                },
            })
            ;
      });     

      app.controller('testController', function ($scope, $state) {
          $scope.moveToMiddle = function () {
             $state.go('main.middle');
          }
      })
    </script>
  </body>

</html>

When I click on move to middle button I got error.

How to move to abstract view?

I have referred this but its not useful in my case.

Noah B · Accepted Answer · 2016-06-30 06:39:32Z

1

You never go to an abstract state. From the docs:

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

If you define main.middle.alpha, main.middle.beta, and main.middle.gama as not abstract, you can transition to those.

answered Jun 30, 2016 at 6:39

Noah B

3311 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Harsh Patel Over a year ago

Then how to handle such scenarios, i have link to alpha,beta and gama in middle, when i click on any link, middle view reloaded. (middle is not abstract in this case)

Noah B Over a year ago

I'm sorry, I don't fully understand. If you click on one of those three ui-sref links, they should load the corresponding child state of middle.

Noah B Over a year ago

What scenarios? Your code above has main.middle as abstract.

Harsh Patel Over a year ago

Actual scenario : in main state i have link to middle state (not abstract) and in middle there are links to child states, when i click any link in middle middle view reloaded with child view.

Noah B Over a year ago

You don't want middle to reload when you go to one of the children?

|

Wasiq Muhammad · Accepted Answer · 2016-06-30 06:48:02Z

0

As mentioned in angualr docs

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

 app.controller('testController', function ($scope, $state) {
          $scope.moveToMiddle = function () {
             $state.go('main.middle.alpha');
          }

as abstract state cannot be instantiated and can't viewed. if you want to access then remove abstract line

answered Jun 30, 2016 at 6:48

Wasiq Muhammad

3,1483 gold badges19 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJS Move to nested abstract view

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related