如何在同一状态下访问其他子视图.我正在建立一个工具栏顶部和侧边栏的页面,我想要一个工具栏上的按钮来打开/关闭边栏中的侧边栏和按钮来更改内容.很容易的在所有在同一个控制器,但我做的是使用ui-router的子视图功能,如下所示：
.state('dash',{
url: '/dash/:id',views: {
nav: {
controller: 'NavCtrl',controllerAs: 'ctrl',templateUrl: '/views/navbar.html'
},sidebar: {
controller: 'SidebarCtrl',templateUrl: '/views/sidebar.html'
},content: {
controller: 'DashCtrl',templateUrl: '/views/dash.html'
}
}
})
UI看起来像这样：
定义一个解决方案,并将其用作存储激活的“破折号”状态的公共数据的位置.
app.config(function($stateProvider) {
$stateProvider.state('dash',{
url: '/',resolve: {
dashData: function() {
return { input: "default value" };
}
},views: {
nav: {
controller: function() {
},template: '<h3>This is the Navbar</h3>'
},sidebar: {
controller: function(dashData) { // Inject reference to resolve object
this.dashData = dashData;
},template: 'content data visible in ' +
'the sidebar: <b>{{ ctrl.dashData.input }}<b>'
},content: {
controller: function(dashData) { // Inject reference to resolve object
this.dashData = dashData;
},template: '<input type="text" ng-model="ctrl.dashData.input">' +
'This is bound to dashData.input'
}
}
})
});
将共享对象注入每个控制器
app.controller('DashCtrl',function(dashData,$scope) {
$scope.dashData = dashData;
});
app.controller('... ....
我把这个例子放在你的一个朋友里面：http://plnkr.co/edit/8M1zXN0W5ybiB8KyxvqW?p=preview
