在一个AngularUI路由器状态共享范围两种观点 [英] Two views in one AngularUI Router state sharing scope
问题描述
我是pretty新来的AngularUI路由器并希望将其用于以下情形：
I am pretty new to the AngularUI Router and would like the use it for the following scenario:
布局共同所有网页包括包含在右边和内容部分填写以下空间按钮的菜单的顶部导航栏中。该页面有我映射到UI路由器的状态（第1页，第2页，...）几页。每一页可以有它自己的菜单项和其自己的内容。在菜单需要与内容，因为它们共享互动的范围（例如保存按钮提交表单的内容，如果表单是有效的它应该只启用）。
The layout common to all pages includes a top navbar containing a menu with buttons on the right and a content section filling the space below. The page has several pages that I map to UI Router states (page1, page2, ...). Each page can have its own menu items and its own content. The menu needs to share the scope with the content since they interact (e.g. the save button submits the form in the content, it should only be enabled if the form is valid).
该HTML大致是这样的：
The HTML roughly looks like this:
<body>
<nav class="...">
<h1>my site</h1>
<div>MENU SHOULD GO HERE</div>
</nav>
<div class="row">
<div class="column ...">
CONTENT SHOULD GO HERE
</div>
</div>
</body>
现在，我使用两个平行视图和两个控制器为每个状态。但这样一来，两个范围/控制器不能相互作用。
Right now, I am using two parallel views and two controllers for each state. But this way, the two scopes/controllers cannot interact.
所以，你会怎么做到的？
So how would you accomplish that?
推荐答案
$范围是不是模型，其模型的参考，胶水中的数据与放大器之间;风景。如果$在两个或更多个范围，控制器需要注册一个角度的服务共享一个模型/状态/数据使用单独的对象实例。只要你喜欢那一个服务/工厂可以注入尽可能多的控制器，然后一切都工作过，真理的来源之一。
$scope is not the model, its a reference to a model, glue in between the data & the view. If $scopes in two, or more, controllers need to share one model/state/data use a singleton object instance by registering a angular service. That one service/factory can be injected into as many controllers as you like, and then everything can work off that one source of truth.
继承人1工厂连接$的演示在导航栏和放大器范围;机身采用UI路由器 http://plnkr.co/edit/P2UudS?p=$p$pview（左标签只）
Heres a demo of 1 factory linking $scopes in navbar & body with ui-router http://plnkr.co/edit/P2UudS?p=preview (left tab only)
UI的路由器（viewC是导航栏）：
ui-router (viewC is navbar):
$stateProvider
.state('left', {
url: "/",
views: {
"viewA": {
controller: 'LeftTabACtrl',
template: 'Left Tab, index.viewA <br>' +
'<input type="checkbox" ng-model="selected2.data" />' +
'<pre>selected2.data: {{selected2.data}}</pre>'
},
{...},
"viewC": {
controller: 'NavbarCtrl',
template: '<span>Left Tab, index.viewC <div ui-view="viewC.list"></div>' +
'<input type="checkbox" ng-model="selected.data" />' +
'<pre>selected.data: {{selected.data}}</pre></span>'
}
}
})
工厂及放大器;控制器：
Factory & Controllers:
app.factory('uiFieldState', function () {
return {uiObject: {data: null}}
});
app.controller('NavbarCtrl', ['$scope', 'uiFieldState', '$stateParams', '$state',
function($scope, uiFieldState, $stateParams, $state) {
$scope.selected = uiFieldState.uiObject;
}
]);
app.controller('LeftTabACtrl', ['$scope', 'uiFieldState', '$stateParams', '$state',
function($scope, uiFieldState, $stateParams, $state) {
$scope.selected2 = uiFieldState.uiObject;
}
]);
正如你所看到的，工厂对象 {UIObject类：{数据：空}} 注入与控制器 uiFieldState ＆安培;那么它只是 $ scope.selected = uiFieldState.uiObject; 为工厂连接范围 NG-模式=selected.data
.`
As you can see, the factory object {uiObject: {data: null}} is injected into the controller with uiFieldState & then its simply $scope.selected = uiFieldState.uiObject; for connecting the factory to the scope ng-model="selected.data"
.`
这篇关于在一个AngularUI路由器状态共享范围两种观点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
