我对AngularUI路由器很新，并希望将其用于以下场景：
所有页面共有的布局包括顶部导航栏，其中包含带有右侧按钮的菜单和填充以下空格的内容部分。该页面有几个页面，我映射到UI路由器状态(第1页，第2页，…)。每个页面都可以有自己的菜单项和自己的内容。菜单需要与内容共享范围，因为它们进行交互(例如，保存按钮在内容中提交表单，只有在表单有效时才应启用)。
HTML大致如下：
<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>
现在，我正在为每个州使用两个并行视图和两个控制器。但是这样，两个示波器/控制器就无法进行交互。
那么你会如何实现呢？
$范围不是模型，它是一个模型的参考，胶水之间的数据&风景。如果两个或更多个控制器中的$范围需要共享一个模型/状态/数据，则通过注册角度服务来使用单例对象实例。一个服务/工厂可以注入尽可能多的控制器，然后一切都可以解决这个真相的一个来源。
原文链接：https://www.f2er.com/angularjs/144173.html亲爱的一个工厂连接$ scope在navbar&身体与ui路由器http://plnkr.co/edit/P2UudS?p=preview(仅限左侧选项卡)
ui-router(viewC是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>'
}
}
})
工厂&控制器：
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',$state) {
$scope.selected2 = uiFieldState.uiObject;
}
]);
如你所见，工厂对象{uiObject：{data：null}}被注入到控制器中，并使用uiFieldState&那么它的简单的$ scope.selected = uiFieldState.uiObject;将工厂连接到范围ng-model =“selected.data”.`
