Geek Answers Handbook

AngularJS Transition to Sibling Abstract State from Sibling

I worked with angular -ui-router and tried to go to the child of one of my abstract states from another child of the same abstract. this diagram shows the Idea a little better:

abstract tree

So where "R" means module and "blue 1" is my abstract state with

<ui-view/>

I have a green "1" load automatically. I'm having problems navigating to the red “2” from ui-sref in green “1”. is there something i have to do, in particular, to jump into the blue “1” or abstract state and then load the state of “red2”?

:: :: ui-sref , statechange.

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'
    });  
}

paper.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>

- , , ?

+4
2

, ... . , , , .

, 1:1 - 

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) { 
}])

, . . ,

+2

console.log

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


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

,

0

More articles:


All Articles