Angular-Ui-Router, nested named views – what am I doing wrong?

All we need is an easy explanation of the problem, so here it is.

I’m trying to implement a very simple example using nested named views using ui-router, and I can’t get it to work. If anyone could look at this jsFiddle – http://jsfiddle.net/thardy/eD3MU/ – and tell me what I’m doing wrong, I’d greatly appreciate it.

The basic idea is this:
– My index.html has a single ui-view
– The template that gets plugged into that has two, named ui-views
– I’m trying to setup the configuration to populate these two ui-views with templates and I can’t get it to work

This is the core of the fiddle (angle brackets in template replaced with []):


        $stateProvider
            .state('test', {
                url: '/test',
                views: {
                    'main': {
                         template:  '[h1]Hello!!![/h1]' +
                                    '[div ui-view="view1"][/div]' +
                                    '[div ui-view="view2"][/div]'
                    }
                }
            })
            .state('test.subs', {
                url: '',
                views: {
                    'view1': {
                        template: "Im View1"
                    },
                    'view2': {
                        template: "Im View2"
                    }
                }
            });

I’ve tweaked it a alot for several hours now (trying absolute names, etc), and I’m about to go crazy. It looks good according to the documentation (at least to me), but there aren’t any simple examples, and I must be missing something obvious.

Update
By removing the url from test state and adding url: ” to the test.subs state, it works. But adding any url to test state causes it to fail again. In my real world scenario, none of these states are at the root, and having no url at all in the parent state causes things to not work well. It’s like that state isn’t activated or something. According to the docs, having url: ” in the sub should cause it to be activated along with it’s parent state, but that’s not what is happening.

Update – Solution
For any who would like to see it – http://jsfiddle.net/thardy/eD3MU/

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

two issues in above code:

  1. As kju suggested abstract: true,

    An abstract state will never be directly activated, but can provide
    inherited properties to its common children states.

  2. add url: "" in test.sub state

    Using an empty url means that this child state will become active when
    its parent’s url is navigated to.

  3. Don’t manual transition to “test”

See code below:

angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
        $stateProvider
            .state('test', {
                abstract: true,
                url: '',
                views: {
                    'main': {
                         template:  '<h1>Hello!!!</h1>' +
                                    '<div ui-view="view1"></div>' +
                                    '<div ui-view="view2"></div>'
                    }
                }
            })
            .state('test.subs', {
                url: '',
                views: {
                    'view1': {
                        template: "Im View1"
                    },
                    'view2': {
                        template: "Im View2"
                    }
                }
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
//        $state.transitionTo('test');
    }]);

Method 2

Add “abstract: true” to the “test” state. If you then transition to test.subs, you will see the subviews.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply