Angular UI-Router nested views not working

Question

The template <h1>HELLO</h1> does not get loaded into the nested ui-view in analysis.client.view.html but the analysis.client.view.html file ui-view is loaded. Can't figure out what I'm doing wrong. I also tried naming the nested ui-view but it didnt seem to help. Any help appreciated. Thanks.

oct.client.routes.js file

'use strict';

//Setting up route
angular.module('oct').config(['$stateProvider',
    function($stateProvider) {
        // Projects state routing
        $stateProvider.
        state('octAnalysis', {
            url: '/oct_analysis',
            templateUrl: 'modules/oct/views/sidebar.client.view.html'
        });

        $stateProvider.
        state('octView', {
                url: '/oct_view',
                templateUrl: 'modules/oct/views/analysis.client.view.html'
            })
            .state('octView.sidebar', {
                template: '<h1>HELLO</h1>'
            });

    }
]);

analysis.client.view.html file

<section class="analysis" ng-controller="AnalysisCtrl">
    <div id="sidenav-cntnr">
        <md-sidenav md-component-id="left" class="md-sidenav-left" md-is-open="" md-is-locked-open="menuPinned">
            Left Nav!
            <div id="pin-cntnr">
                <button ng-click="togglePinLeftMenu()">Pin</button>
                <button ng-click="closeLeftMenu()">Close</button>
            </div>
            <div ui-view></div>

        </md-sidenav>
    </div>
</section>

The entire project isn't necessary, just something that recreates the issue that we can see and test. http://stackoverflow.com/help/mcve — xkcd149, Mar 11 '16 at 19:07
The `'octView.sidebar'` state doesn't have a URL defined. It can't be activated. — , Mar 11 '16 at 19:13

score 0 · Answer 1 · 2016-03-12T17:03:30.870

I haven't tested this, but I went through this issue myself a few weeks back and this was what I came up with. You might need to tweak it a little bit. First, change your .html from this:

<div ui-view></div>

to this named view:

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

Then change your state configuration as so:

$stateProvider.state('octView', {
    url: '/oct_view',
    views: {
        "": {
            templateUrl: 'modules/oct/views/analysis.client.view.html',
        }
        "sidebar": {
            template: "HELLO"
        }
    }
});

Daniel Kobe: I tried url: ' ' but this didnt do anything

The thing is, you aren't actually using a child state. States are activated when the URL matches, so the sidebar would only get activated when the browser's URL is "/oct_view/ " (notice the space). You're really using one state, with multiple views. You're wanting to direct users to a page represented by a state, and you want the sidebar to load as part of that state. The sidebar can have its own controller. See the Angular UI documentation on named views for more information.

I hope that makes sense.

When I do this the page loads nothing. With no error message. — Daniel Kobe, Mar 12 '16 at 05:37

score 0 · Answer 2 · edited May 23 '17 at 11:50

I fixed the problem by looking at this post's selected answer Directing the user to a child state when they are transitioning to its parent state using UI-Router

I changed the routing code as follows:

    $stateProvider.
    state('octView', {
            url: '/oct_view',
            abstract: true,
            views: {
                '': {
                    templateUrl: 'modules/oct/views/analysis.client.view.html'
                }
            }
        })
        .state('octView.sidebar', {
            url: '',
            template: 'HELLO'
        });

Angular UI-Router nested views not working

oct.client.routes.js file

analysis.client.view.html file

2 Answers2