想象一个应用程序有一个列表页面，例如一个显示用户列表的表格。表格的每一行都有一个名为“编辑”的按钮，单击此按钮时，浏览器右侧会出现一个右侧面板，其中包含用于编辑该用户内容的表单。当表单被保存或关闭时，右侧面板消失。
当进入和退出编辑状态时，如何让 Angular UI Router 自动显示/隐藏右侧面板？默认情况下，会添加和删除模板，但容器本身仍会存在于屏幕上。
在 UI Router 的演示应用程序中，html 布局为所有子状态分配了空白空间，但在我正在构建的应用程序中，如果面板不被使用甚至滑动，我真的很想隐藏它们随着状态的进入和退出，整个屏幕进出。我猜我必须使用 ng-show 和 ng-hide 才能做到这一点。我该如何使用 UI Router 来解决这个问题？
谢谢！
【问题讨论】：
标签： javascript jquery angularjs angular-ui-router
Angular 的 ui-router 提供了一种干净的方法来切换嵌套视图。
首先将 $state 注入您假设的“列表页面”控制器。然后将其暴露给本地 $scope：
.controller('ListPageCtrl', function($scope, $state) {
$scope.$state = $state;
})
我们注入的 $state 变量有一个很好的“包含”方法。 $state.includes() 将字符串作为参数，并根据当前状态名称检查该字符串。如果状态名称与字符串匹配，则返回 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'
}
}
});
【讨论】：
我想出的最佳解决方案是这样的：
<div id="rightView" ng-show="$state.current.name === 'adminCompanies.list.edit'">
<div ui-view autoscroll="false"></div>
</div>
【讨论】：
以任何方式解决此问题，只需确保在 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 文档并检查示例应用程序的代码，就在我的头撞在键盘上之后，因为这不起作用。
【讨论】：
您的网址必须使用查询字符串反映状态模式：/stuff/1?edit 或代表/stuff/1?view 的/stuff/1
您可以使用reloadOnSearch=false 来指示 AngularJS 不要重新加载视图：
http://docs.angularjs.org/api/ngRoute.$routeProvider
在您的controller 中，使用$routeParams 检查状态模式（view 或edit）。捕捉编辑点击事件，将您的模型传递到您的栏并相应地切换其可见性。
查看那些有趣的链接：
Can you change a path without reloading the controller in AngularJS?
【讨论】：