1

Tenho a seguinte configuração para as rotas:

$stateProvider
        .state('login', {
            public: true,
            url: '/login',
            templateUrl: 'app/src/components/bo/areas/login/login.view.html',
            controller: 'LoginController',
            controllerAs: 'vm'
        })
        .state('app', {
            public: false,
            abstract: true,
            templateUrl: 'app/src/core/views/app.view.html'
        })
        .state('app.common', {
            public: false,
            abstract: true,
            views: {
                'sidenav': {
                    templateUrl: 'app/src/components/bo/areas/common/sidenav/sidenav.view.html',
                    controller: 'SidenavController',
                    controllerAs: 'sidenavvm'
                },
                'toolbar': {
                    templateUrl: 'app/src/components/bo/areas/common/toolbar/toolbar.view.html',
                    controller: 'ToolbarController',
                    controllerAs: 'toolbarvm'
                }
            }
        })
        .state('app.common.dashboard', {
            public: false,
            url: '/dashboard',
            views: {
                'content': {
                    templateUrl: 'app/src/components/bo/areas/dashboard/dashboard.view.html',
                    controller: 'DashboardController',
                    controllerAs: 'vm'
                }
            }
        })
    ;

Repare que a rota /dashboard possui 2 heranças: app e common (app.common.dashboard).

Isso foi necessário porque após o login o cliente é redirecionado para o dashboard, mas é necessário incluir no HTML as partes comuns a todas as páginas, como o sidenav e o toolbar, daí a necessidade da segunda herança common.

O app.view.html possui a seguinte estrutura:

<div ui-view="sidenav"></div>
<div ui-view="toolbar"></div>
<div ui-view="content"></div>

Quando acesso o dashboard, as views sidenav e toolbar são preenchidas, mas a view content fica em branco , mas deveria aparecer o HTML do dashboard.

Já verifiquei e o caminho para o arquivo HTML está correto.

O que fiz errado?

1 Resposta 1

2

Na documentação da lib ui-router encontrei a solução.

Basta adicionar o state no nome da view separando por um arroba (content@app), veja:

        .state('app.common.dashboard', {
            public: false,
            url: '/dashboard',
            views: {
                'content@app': {
                    templateUrl: 'app/src/components/havas-bo/areas/dashboard/dashboard.view.html',
                    controller: 'DashboardController',
                    controllerAs: 'vm'
                }
            }
        })//...

Na hierarquia, o dasboard vem depois do common, ou seja, a view content existe no state app mas não existe no common, logo é preciso especificar em qual state se encontra a view no qual o HTLM deve ser renderizado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .