Angular UI Router 是 AngularJS 中流行的路由库之一，它提供了比 Angular 自带的 $routeProvider 更多的功能和灵活性。在 UI Router 中，我们可以使用 ng-hide 和 ng-show 指令轻松控制视图的显示和隐藏。
为什么要使用 ng-hide 和 ng-show？
在 Web 应用开发中，有时需要根据用户的操作或数据状态动态显示或隐藏某些页面元素。常见的需求包括：
- 根据登录状态显示不同的导航菜单
- 根据查询结果显示或隐藏搜索框
- 根据表单输入验证结果显示或隐藏提交按钮
使用 ng-hide 和 ng-show 可以方便地实现这些需求，同时也可以提高应用的用户体验。
如何在 Angular UI Router 中使用 ng-hide 和 ng-show？
UI Router 的核心是状态（state）机制，每个状态对应一个视图（view）。我们可以通过定义状态来控制视图的显示和隐藏。
例如，下面是一个简单的例子，展示如何在 UI Router 中使用 ng-hide 和 ng-show：
<!-- index.html --> <div ui-view></div>
-- -------------------- ---- -------
-- ------
----------------------- --------------
-------------------------------- -
---------------------------- -
---- ----
--------- ---- --------------------------- -- -- ---------------
----------- ---------------- -
---------------- - -----
-
---
---在这个例子中，我们定义了一个名为 "home" 的状态，它对应的视图包含了一个标题。标题元素使用 ng-show 指令，根据控制器中的 showTitle 变量来决定是否显示。
当用户访问网站首页时，UI Router 会加载 "home" 状态，并执行其对应的控制器。控制器中的 showTitle 变量默认为 true，因此标题会显示出来。如果需要隐藏标题，只需将 showTitle 设为 false 即可。
更多 ng-hide 和 ng-show 的用法
除了简单的显示和隐藏，ng-hide 和 ng-show 还有更多高级用法。以下是一些示例：
在列表中显示不同类型的项目
-- -------------------- ---- -------
----
--- --------------- -- ------
------------------ --- ----------
-- --------- -- --------
-----
--- --------------- -- ------
------------------ --- -----------
-- --------- -- ---------
-----
-----在这个例子中，我们通过 ng-repeat 指令循环遍历一个名为 items 的数组，并根据每个元素的 type 属性来显示或隐藏相应的列表项。
根据表单输入验证结果显示提交按钮
-- -------------------- ---- -------
----- --------------
------ -----------
---------------
------------------------
---------
------- -------------
------------------------
------
---------
-------在这个例子中，我们使用 ng-model 指令将表单输入绑定到 user.username 变量上，并设置了 required 属性，以确保用户必须填写用户名才能提交。同时，提交按钮使用 ng-show 指令来根据表单验证结果判断是否显示。
总结
ng-hide 和 ng-show 指令是 AngularJS 中非常有用的指令，可以帮助我们方便地控制视图的显示和隐藏。在 UI Router 中，我们可以通过定义状态和使用 ng-hide/ng-show 指令轻松实现这些功能。希望本文对您学习和使用 Angular UI Router 带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26888