如何采用了棱角分明的UI路由器NG-隐藏和NG-节目的看法？ [英] How to ng-hide and ng-show views using angular ui router?

问题描述

设想一个应用程序具有一个列表页，如示出的用户的列表的表格。上有叫做编辑表中的每一行的一个按钮，并且这被点击时，右面板上与表格的浏览器的右侧出现来编辑该用户的内容。当表单保存或关闭时，右侧面板消失。

Imagine an application has a List page, such as a table showing a list of users. There is a button on each row of the table called "Edit", and when this is clicked, a right-panel appears on the right-side of the browser with the form to edit that user's contents. When the form is saved or is closed, the right-side panel disappears.

你怎么角UI路由器时，进入和退出编辑状态显示/自动隐藏右侧面板？默认情况下，模板将被添加和删除，但容器本身仍然在屏幕上存在。

How do you get Angular UI Router to show/hide the right-side panel automatically when the edit state is entered and exited? By default, the template will be added and removed, but the container itself will still exist on the screen.

在为UI路由器的演示应用程序，HTML布局已经分配给所有的子状态空，但在我建立的应用程序，我真的很想隐藏面板如果不使用，甚至他们滑出在和出整个屏幕的状态进入和退出。我猜，我将不得不使用NG-展示和NG-隐藏才能做到这一点。我怎么去用这个UI路由器？

In the demo application for UI Router, the html layout had empty space allocated for all of the child states, but in the application I am building, I'd really like to hide panels if they are not being used and even slide entire screens in-and-out as states are entered and exited. I'm guessing that I'll have to make use of ng-show and ng-hide in order to do that. How do I go about this with UI Router?

谢谢！

推荐答案

我想出了最好的解决办法是这样的：

The best solution I came up with was something like this:

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

这篇关于如何采用了棱角分明的UI路由器NG-隐藏和NG-节目的看法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！