如何使用 Angular ui 路由器 ng-hide 和 ng-show 视图？

Posted 2023-05-08

技术标签:

【中文标题】如何使用 Angular ui 路由器 ng-hide 和 ng-show 视图？【英文标题】：How to ng-hide and ng-show views using angular ui router? 【发布时间】：2014-03-08 21:35:38 【问题描述】：

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

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

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

谢谢！

【问题讨论】：

【参考方案1】：

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'
        
    
);

【讨论】：

【参考方案2】：

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

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

【讨论】：

你能解释一下吗？我们必须在哪里添加 ng-show？ - 在父模板或子模板中。以及它是如何隐藏父视图的？【参考方案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 文档并检查示例应用程序的代码，就在我的头撞在键盘上之后，因为这不起作用。

【讨论】：

拯救了我的一天！非常感谢！【参考方案4】：

您的网址必须使用查询字符串反映状态模式：/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?

Updating URL in Angular JS without re-rendering view

【讨论】：

感谢您的回复。我实际上不打算使用 ngRoute。我正在使用 Angular UI 路由器：github.com/angular-ui/ui-router/wiki