moondaisy moondaisy - 25 days ago 23
AngularJS Question

UI Router nested views

I've tried with various anwsers without any luck.

I have this two ui-views:

<div ui-view class="expand"></div> //Inside index.html

<div ui-view></div> //Inside home.html


And this is my routing:

$stateProvider
.state('home', {
url: '/',
views: {
'@': {
templateUrl: 'app/components/home/home.html',
controller: 'HomeCtrl'
}
}
})
.state('clients', {
url: '/clients',
views: {
'@home': {
templateUrl: 'app/components/clients/clients.html',
controller: 'ClientsCtrl'
}
}
})


I've tried putting names on the view and calling them in different ways but clients.html never gets display even though the route url changes.

Answer

I'm not entirely familiar with the view syntax that you're using with $stateProvider but I would recommend that you nested view or child states like this:

    $stateProvider
        .state('base', {
            abstract: true,
            url: '',
            templateUrl: 'views/base.html'
        })
        .state('login', {
            url: '/login',
            parent: 'base',
            templateUrl: 'views/login.html',
            controller: 'LoginCtrl'
        })
        .state('dashboard', {
            url: '/dashboard',
            parent: 'base',
            templateUrl: 'views/dashboard.html'
        })
        .state('overview', {
            url: '/overview',
            parent: 'dashboard',
            templateUrl: 'views/dashboard/overview.html',
            controller: 'DashboardCtrl',
            resolve: {
                syncObject: function($firebaseObject, gameFactory) {
                    return $firebaseObject(gameFactory.ref());
                },
                usersRef: function($firebaseObject, gameFactory) {
                    return gameFactory.ref().child("users");
                },
                userId: function($firebaseObject, gameFactory) {
                    return gameFactory.auth().$getAuth().uid;
                }
            }
        })
        .state('lobby', {
            url: '/lobby/:lobbyId/:userUniqueID',
            parent: 'overview',
            templateUrl: 'views/dashboard/lobby.html',
            controller: 'lobbyCtrl',
            resolve: {
                gamesRef: function(gameFactory){
                    return gameFactory.ref().child('games');
                },
                lobbyRef: function($firebaseObject, gameFactory, $stateParams){
                    return $firebaseObject(gameFactory.ref().child('lobbies').child($stateParams.lobbyId));
                },
                lobbyId: function($stateParams){
                    return $stateParams.lobbyId;
                },
                lobbyUserObj: function($firebaseObject, gameFactory, $stateParams){
                    var userObj = $firebaseObject(gameFactory.ref().child('lobbies').child($stateParams.lobbyId).child('players').child($stateParams.userUniqueID));
                    return userObj.$loaded().then(function(userObj){
                        return userObj;
                    });
                }
            }
        })
Comments