角UI路由器在相同状态的子视图之间传递数据
美佳
如何访问处于相同状态的其他子视图。我正在建立一个页面，该页面的顶部是一个工具栏，一个边栏，我希望工具栏上的按钮可以打开/关闭边栏，而边栏上的按钮可以更改内容。这很容易，因为它们都在同一控制器中，但是我要做的是使用ui-router的子视图功能，如下所示：
.state('dash', {
url: '/dash/:id',
views: {
nav: {
controller: 'NavCtrl',
controllerAs: 'ctrl',
templateUrl: '/views/navbar.html'
},
sidebar: {
controller: 'SidebarCtrl',
controllerAs: 'ctrl',
templateUrl: '/views/sidebar.html'
},
content: {
controller: 'DashCtrl',
controllerAs: 'ctrl',
templateUrl: '/views/dash.html'
}
}
})
用户界面如下所示：
克里斯·T
定义一个解析并将其用作存储激活的“破折号”状态的通用数据的地方。
app.config(function($stateProvider) {
$stateProvider.state('dash', {
url: '/',
resolve: {
dashData: function() {
return { input: "default value" };
}
},
views: {
nav: {
controller: function() {
},
controllerAs: 'ctrl',
template: '<h3>This is the Navbar</h3>'
},
sidebar: {
controller: function(dashData) { // Inject reference to resolve object
this.dashData = dashData;
},
controllerAs: 'ctrl',
template: 'content data visible in ' +
'the sidebar: <b>{{ ctrl.dashData.input }}<b>'
},
content: {
controller: function(dashData) { // Inject reference to resolve object
this.dashData = dashData;
},
controllerAs: 'ctrl',
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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
具有子状态的角UI路由器并行视图
- 2
Angular ui路由器-在状态之间共享视图
- 3
如何在角度ui路由器状态之间传递数据？
- 4
AngularJS-UI路由器在视图之间共享数据
- 5
UI路由器子视图
- 6
状态和视图中指定的AngularJS UI路由器参数对象之间的区别
- 7
角ui路由器抽象状态$ scope未删除
- 8
角UI路由器状态未加载
- 9
角UI路由器状态未加载
- 10
角UI路由器完成条件视图
- 11
角ui路由器嵌套视图无法显示？
- 12
角度ui路由器：父视图和子视图
- 13
如何在angularjs ui路由器的状态之间共享$ scope数据？
- 14
在兄弟状态之间共享ui路由器“自定义数据”
- 15
没有嵌套视图的嵌套ui路由器状态？
- 16
在ui路由器状态之间发送事件
- 17
在ui路由器状态之间发送事件
- 18
UI路由器未加载预期的子状态
- 19
AngularJS UI路由器$ state仅重载子状态
- 20
UI路由器未加载预期的子状态
- 21
如何在UI路由器AngularJS中保持父级相同的同时仅更改子UI视图？
- 22
AngularJs UI路由器子视图消失
- 23
UI 路由器，从父控制器传递数据
- 24
在几个路由器视图之间更改数据
- 25
角嵌套路由器-ui
- 26
角UI路由器解决继承
- 27
UI路由器的父状态，子状态控制器
- 28
角ui路由器嵌套视图将模板和控制器分开
- 29
在角度ui路由器中处于相同状态时重新加载状态
我来说两句