如何使用angular度ui路由器来隐藏和显示视图？

想象一下，一个应用程序有一个List页面，比如一个显示用户列表的表格。 表格的每一行都有一个名为“编辑”的button，点击该button后，浏览器的右侧出现一个右侧面板，编辑该用户的内容。 当表单被保存或closures时，右侧面板消失。

在编辑状态input和退出时，如何让Angular UI Router自动显示/隐藏右侧面板？ 默认情况下，模板将被添加和删除，但容器本身仍然存在于屏幕上。

在UI路由器的演示应用程序中，html布局具有为所有子状态分配的空白空间，但在构build的应用程序中，如果不使用它们，我真的很喜欢隐藏面板，甚至可以将整个屏幕滑入随着国家进入和退出而退出。 我猜测我必须使用ng-show和ng-hide才能做到这一点。 我如何通过UI路由器来解决这个问题？

谢谢！

Answer 1

Angular的UI路由器提供了一个干净的方法来切换嵌套视图。

首先注入$状态到您的假设“列表页面”控制器。 然后将其暴露给本地$ scope：

.controller('ListPageCtrl', function($scope, $state) { $scope.$state = $state; }) 

我们注入的$ statevariables有一个很好的“包含”方法。 $ state.includes（）将一个string作为参数，并检查该string是否与当前状态名称相对应。 如果状态名称匹配string，则返回true，否则返回false。 这使得使用ng-show或ng-hide非常好。

使用ui-router的$ state.includes（）而不是使用与egervari相同的模板：

 <div id="rightView" ng-show="$state.includes('list.edit')"> <div ui-view="edit" autoscroll="false"></div> </div> 

除了切换到包含方法外，我还为ui-view属性添加了一个唯一的名称。 一旦你有更多的两个，你会想要命名你的意见。 这将使他们更容易跟踪你的模板和逻辑。

为您的视图添加名称。 将1更改为2：

 // 1 .state('list.edit', { url: 'list/edit/:id', templateUrl: 'template/edit.html', controller: 'ListPageEditCtrl' }) // 2 .state('list.edit', { url: 'list/edit/:id', views: { 'edit': { // this is the unique name you can reference later templateUrl: 'template/edit.html', controller: 'ListPageEditCtrl' } } }); 

Answer 2

我想到的最好的解决scheme是这样的：

 <div id="rightView" ng-show="$state.current.name === 'adminCompanies.list.edit'"> <div ui-view autoscroll="false"></div> </div> 

Answer 3

在任何情况下，您都可以解决这个问题，只要确保在angular应用程序的.run部分中声明了如下内容：

 angular.module('yourApp', ['ui.router']) .run( ['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams){ $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; } ] ) 

否则$ state和$ stateParams都不能从内部模板中获取。 通过阅读ui-router文档并检查示例应用程序的代码，只是在将我的头撞在键盘上后，才发现它没有起作用。

Answer 4

你的url必须反映使用查询string的状态模式： /stuff/1?edit或/stuff/1代表/stuff/1?view

你可以使用reloadOnSearch=false来指示AngularJS不要重新加载视图：

http://docs.angularjs.org/api/ngRoute.$routeProvider

在controller内部，使用$routeParams检查状态模式（ view或edit ）。 抓住编辑点击事件，将您的模型传递到您的酒吧，并相应地切换其可见性。

看到那些有趣的链接：

你可以改变一个path，而不用重新加载AngularJS中的控制器？

在Angular JS中更新URL而不重新呈现视图