我是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>
现在,我为每个状态使用两个并行视图和两个控制器。但是这样,两个示波器/控制器就无法交互。
那么,您将如何实现呢?
$ scope不是模型,它是对模型的引用,粘在数据和视图之间。如果$ scopes在两个或更多个中,则控制器需要通过注册角度服务来使用单例对象实例来共享一个模型/状态/数据。可以根据需要将一个服务/工厂注入到尽可能多的控制器中,然后一切都可以在这一事实来源中发挥作用。
这是1个工厂的演示,该工厂将Navbar和body中的$ scopes与ui- router链接http://plnkr.co/edit/P2UudS?p=preview(仅左侧标签)
ui路由器(viewC是导航栏):
$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', ['$scope', 'uiFieldState', '$stateParams', '$state', function($scope, uiFieldState, $stateParams, $state) { $scope.selected2 = uiFieldState.uiObject; } ]);
如您所见,工厂对象{uiObject: {data: null}}通过uiFieldState&注入到控制器中,然后简单地$scope.selected = uiFieldState.uiObject;将工厂连接到示波器ng-model="selected.data" 。
{uiObject: {data: null}}
uiFieldState
$scope.selected = uiFieldState.uiObject;
ng-model="selected.data"