AngularJS Transition to sibling of abstract state from sibling

Question

I have been working with angular-ui-router and trying to transition to a child of one of my abstract states from within another child of the same abstract. this diagram shows the Idea a bit better:

abstract tree

So where 'R' is say the module and 'blue 1' is my abstract state with a

<ui-view/>

I have the green '1' load into the view automatically. what I am having trouble with is navigating to the red '2' from a ui-sref within the green '1'. is there something I have to do in particular to jump up into the blue'1' or abstract state then load the 'red2' state?

::NOTE:: if I put the ui-sref call into the abstracts template and call it from there the statechange works.

here is my state setup in app.js:

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

app.config( function( $stateProvider, $urlRouterProvider ) {
     $stateProvider
        .state( 'Papers',  {
        url: "/Papers",
        abstract: true,
        template: '<ui-view />'
    }) // nested paper states
    .state( 'Papers.home', {
        url: '', // default load, no path defined
        templateUrl: 'templates/views/connect/Papers.home.html',
        controller: 'whitePapersController'
    })
    .state( 'Papers.paper1', {
        url: '/paper1',
        templateUrl: 'templates/views/connect/Papers.paper1.html',
        controller: 'PapersController'
    })
    .state( 'Papers.paper2', {
        url: '/paper2',
        templateUrl: 'templates/views/connect/Papers.paper2.html',
        controller: 'PapersController'
    });  
}

and here is an example of papers.home.html:

<h3>
    <a ui-sref="Papers.paper1">
        click me for paper 1
    </a>
</h3>

<h3>
    <a ui-sref="Papers.paper2">
        click me for paper 2
    </a>
</h3>

for whatever reason I cannot transition to the other states from within a sibling state of the abstract parent, any idea as to why?

score 2 · Accepted Answer · answered Feb 26 '15 at 07:04

Sometimes it is a typo, sometimes... some hidden setting. The best you can do, is to observe this working example, which I created based on your scenario.

The point is, that I used your definition 1 : 1 - and it is working

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

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

    $urlRouterProvider.otherwise('/Papers');

    .state( 'Papers',  {
        url: "/Papers",
        abstract: true,
        template: '<ui-view />'
    }) // nested paper states
    .state( 'Papers.home', {
        url: '', // default load, no path defined
        templateUrl: 'templates/views/connect/Papers.home.html',
        controller: 'whitePapersController'
    })
    .state( 'Papers.paper1', {
        url: '/paper1',
        templateUrl: 'templates/views/connect/Papers.paper1.html',
        controller: 'PapersController'
    })
    .state( 'Papers.paper2', {
        url: '/paper2',
        templateUrl: 'templates/views/connect/Papers.paper2.html',
        controller: 'PapersController'
    });  
    }
])
.controller('whitePapersController', ['$scope', function ($scope) { 
}])
.controller('PapersController', ['$scope', function ($scope) { 
}])

So, this is working. As it is. Check that example and compare with your local solution, and you should find the issue

Thanks! with this I will be able to see where my problem is. I figured after time that it must be something with my code since I cannot think of a reason as to why one wouldnt be able to transition to a sibling state from within a sibling of an abstract. — Eolis, Feb 26 '15 at 19:18
Great! The UI-Router is really predictable. Wish you make it :) — Radim Köhler, Feb 26 '15 at 19:21

Vlad Gurovich · Answer 2 · 2015-02-25T22:57:34.137

0

Try adding the following console.log output in your top-most controller

$rootScope.$on('$stateChangeError', 
function(event, toState, toParams, fromState, fromParams, error){ 
  console.log('$stateChangeError', error');
})

Also add

$rootScope.$on('$stateNotFound', 
function(event, unfoundState, unfoundStateParams, fromState, fromParams, error){ 
  console.log('$stateNotFound', unfoundState, unfoundStateParams, fromState, fromParams);
})

One of these should tell you whats happening

edited Feb 25 '15 at 22:57

answered Feb 25 '15 at 22:41

Vlad Gurovich

8,463
2
27
28

Added, It did not create a log so it seems a statechange is not being called when the link is being clicked. – Eolis Feb 25 '15 at 22:51
Added another log statement. ARe there any errors in the dev console? – Vlad Gurovich Feb 25 '15 at 22:58
No there are still no errors. clicking the ui-sref withing the nested state is not triggering a statechange event. im making a plunkr now. – Eolis Feb 26 '15 at 05:54
yes please make a plunkr. Anytime i had issues with state changes, adding state event listeners would help me figure out whats going on. – Vlad Gurovich Feb 26 '15 at 06:31
Other fellow beat me to the plunker, BUT his is working great and has some nifty logs in it as well. thanks for your feedback! I have saved your logs for when I run into issues in the future – Eolis Feb 26 '15 at 19:26

AngularJS Transition to sibling of abstract state from sibling

2 Answers2