我有一个应用程序,我希望两个面板(ui-view)单独工作。
https://jsbin.com/neroze/edit?js,输出
但是,当我单击链接更改右侧面板时,中心面板会更改,当我单击以更改中心面板时,右侧面板会更改。
我想知道如何解决这个问题。
我有一个应用程序,我希望两个面板(ui-view)单独工作。
https://jsbin.com/neroze/edit?js,输出
但是,当我单击链接更改右侧面板时,中心面板会更改,当我单击以更改中心面板时,右侧面板会更改。
我想知道如何解决这个问题。
您应该有一个主状态(父状态)来定义您的视图(带有控制器和模板等......)然后您可以有子状态,您可以在其中使用绝对状态定义覆盖您的视图。
$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'
}
}
});
注意:这只是从头开始的一个例子,可能不适用于第一次运行。