创建了一个使用两个独立区域来显示数据的应用。一个在另一个之上(因为这似乎是一个很酷的主意:))
我的问题是两者都是由状态控制的,我无法弄清楚如何制作它以便在顶层时不更新基础状态。但是,我希望底层始终存在。
这就是我设置状态的方式
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(''); //Setting the default to the padz
$stateProvider
.state('index', {
url: '',
views: {
"musicview": {
templateUrl: 'partials/music',
controller: 'MusicController'
},
"controlview": {
templateUrl: 'controlview/welcome',
controller: 'ControllerCV'
}
}
})
.state('about', {
url: 'about',
views: {
"musicview": {
templateUrl: 'partials/music',
controller: 'MusicController'
},
"controlview": {
templateUrl: 'controlview/welcome',
cotroller: 'ContrillerCV'
}
}
})
.state('config', {
url: 'config',
views: {
"musicview": {
templateUrl: 'partials/music',
controller: 'MusicController'
},
"controlview": {
templateUrl: 'controlview/config',
cotroller: 'ControllerCV'
}
}
})
.state('contact', {
url: 'contact',
views: {
"musicview": {
templateUrl: 'partials/music',
controller: 'MusicController'
},
"controlview": {
templateUrl: 'controlview/contact',
cotroller: 'ControllerCV'
}
}
})
.state('forum', {
url: 'forum',
views: {
"musicview": {
templateUrl: 'partials/music',
controller: 'MusicController'
},
"controlview": {
templateUrl: 'controlview/forum',
cotroller: 'ControllerCV'
}
}
})
这是ui-views
<div id="musiccontainer">
<div ui-view="musicview"></div>
</div><!-- End of container-->
<div id="controllayer">
<% include controlview/controls/defaults.ejs %>
<div id="controlwindow">
<div ui-view="controlview">
</div>
</div>
<% include controlview/controls/playlog.ejs %>
</div>
答案 0 :(得分:0)
由于两个视图都具有状态,因此将同时切换。 也许如果你想让其中一个永远存在,你需要从视图列表中删除,并且只有这样的结构:
<!-- this one will be always managed by one controller : myStaticDataController-->
<div id="musiccontainer">
<div ng-controller="myStaticDataController">
</div>
</div>
<!-- this one will be changing accoriding to the states-->
<div id="controllayer">
<% include controlview/controls/defaults.ejs %>
<div id="controlwindow">
<div ui-view="controlview">
</div>
</div>
<% include controlview/controls/playlog.ejs %>
</div>