Inheritance does not work when using the angular-ui-router state

Question

Inheritance does not work when using the angular-ui-router state

Navigation

#1 by (2 votes)

1

I have the following configuration for the routes:

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

Notice that the /dashboard path has 2 inheritance: app and common (app.common.dashboard).

This was necessary because after login the client is redirected to the dashboard, but it is necessary to include in the HTML the parts common to all pages, such as sidenav and toolbar , hence the need for the second inheritance common .

app.view.html has the following structure:

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

When you access the dashboard, the sidenav and toolbar views are populated, but the content view is blank, but the dashboard HTML should appear.

I've already checked and the path to the HTML file is correct.

What did I do wrong?

javascript angularjs

asked by anonymous 23.08.2016 / 12:50

1 answer

Get json array value for string - Java Search for objects in runtime

score 2 · Accepted Answer

At the / a> of lib ui-router found the solution.

Just add the state in the name of the view by separating by an arroba (content @ app), see:

        .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'
                }
            }
        })//...

In the hierarchy, dasboard comes after common , that is, view content exists in state app but does not exist in common , so you need to specify in which state the view is on which HTLM should be rendered.