如何使用 angular ui 路由器 ng-hide 和 ng-show 视图? [英] How to ng-hide and ng-show views using angular ui router?

问题描述

想象一个应用程序有一个列表页面，例如一个显示用户列表的表格.表格的每一行都有一个名为编辑"的按钮，单击该按钮后，浏览器右侧会出现一个右侧面板，其中包含用于编辑该用户内容的表单.当表单保存或关闭时，右侧面板消失.

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

在 UI Router 的演示应用程序中，html 布局为所有子状态分配了空白空间，但在我正在构建的应用程序中，如果面板没有被使用甚至滑动，我真的很想隐藏它们随着状态的进入和退出，整个屏幕进出.我猜我必须使用 ng-show 和 ng-hide 才能做到这一点.我该如何使用 UI Router 解决这个问题?

谢谢！

解决方案

我想出的最佳解决方案是这样的:

<div ui-view autoscroll="false"></div>

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.

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.

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?

Thanks!

解决方案

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>

这篇关于如何使用 angular ui 路由器 ng-hide 和 ng-show 视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！