一个 AngularUI 路由器状态共享范围中的两个视图 [英] Two views in one AngularUI Router state sharing scope
问题描述
我对 AngularUI 路由器很陌生，希望将其用于以下场景:
布局所有页面通用包括顶部导航栏，其中包含右侧带有按钮的菜单和填充下方空间的内容部分.该页面有几个页面，我将这些页面映射到 UI 路由器状态(page1、page2、...).每个页面都可以有自己的菜单项和自己的内容.菜单需要与内容共享范围，因为它们是交互的(例如，保存按钮提交内容中的表单，只有在表单有效时才应启用).
HTML 大致如下所示:
<nav class="..."><h1>我的网站</h1><div>菜单应该在这里</div></nav><div class="row"><div class="column ...">内容应该放在这里现在，我为每个状态使用两个并行视图和两个控制器.但是这样一来，两个作用域/控制器就无法交互了.
那么你将如何做到这一点?
$scope 不是模型，它是对模型的引用，粘在数据 &风景.如果 $scopes 在两个或更多，控制器需要共享一个模型/状态/数据，通过注册 angular 服务使用单例对象实例.可以将一个服务/工厂注入任意数量的控制器中，然后一切都可以在同一个事实来源下工作.
这是 1 个工厂在导航栏中链接 $scopes 的演示 &带有 ui-router 的主体 http://plnkr.co/edit/P2UudS?p=preview(仅左侧选项卡)
ui-router(viewC 是导航栏):
$stateProvider.state('左', {网址:/"，意见:{视图A":{控制器:'LeftTabACtrl',模板:'左标签，index.viewA
'+'<input type="checkbox" ng-model="selected2.data"/>'+'<pre>selected2.data: {{selected2.data}}</pre>'},{...},视图C":{控制器:'NavbarCtrl',模板:'<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>'}}})工厂&控制器:
app.factory('uiFieldState', function () {返回{uiObject:{数据:空}}});app.controller('NavbarCtrl', ['$scope', 'uiFieldState', '$stateParams', '$state',函数($scope，uiFieldState，$stateParams，$state){$scope.selected = uiFieldState.uiObject;}]);app.controller('LeftTabACtrl', ['$scope', 'uiFieldState', '$stateParams', '$state',函数($scope，uiFieldState，$stateParams，$state){$scope.selected2 = uiFieldState.uiObject;}]);如你所见，工厂对象 {uiObject: {data: null}} 被注入到控制器中，带有 uiFieldState &然后它只是 $scope.selected = uiFieldState.uiObject; 用于将工厂连接到范围 ng-model="selected.data".`
I am pretty new to the AngularUI Router and would like the use it for the following scenario:
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).
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.
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-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;
}
]);
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屋！
