How use two ui-view independents

Question

I have an application where I wish that two panels (ui-view) work singly.

But, when I click in link to change the right panel, the center panel is changed and when I click to change the center panel, the right panel is changed.

I wonder how I can work around this problem.

Do the right and left painel need to be dynamic? – Renan Ferreira Jan 04 '16 at 18:34 — Renan Ferreira, Jan 04 '16 at 18:34
I need at least the right panel is dynamic and independent. – Alex Oliveira Jan 05 '16 at 12:40 — Alex Oliveira, Jan 05 '16 at 12:40

score 0 · Answer 1 · answered Jan 04 '16 at 18:43

You should have a main state (a parent state) which defines your views (with controllers and templates, etc...) Then you can have child states where you can override your views using absolute state definitions.

$stateProvider.state('app', {
    url: '/',
    abstract: true,
    parent: 'app',
    views: {
        'panelLeft@app': {
             templateUrl: 'modules/panel/views/leftPanel.html',
             controller: 'LeftPanelCtrl as vm'
        },
        'panelRight@app': {
            templateUrl: 'modules/module1/views/anotherView.html',
            controller: 'Module1Ctrl as vm'
        }
    }
}).state('anotherstate', {
    url: '/',
    parent: 'app',
    views: {
        'panelRight@anotherstate': {
            templateUrl: 'modules/module2/views/differentView.html',
            controller: 'Module2Ctrl as vm'
        }
    }
});

Note: it's just an example from scractch, may not work for the first run.

How use two ui-view independents

1 Answers1