如何使用angular ui路由器来隐藏和显示视图？

Question

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

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

在UI路由器的演示应用程序中,html布局为所有子状态分配了空白区域,但在我正在构建的应用程序中,如果不使用它们甚至将整个屏幕滑动,我真的很想隐藏它们.在进入和退出状态时输出.我猜我必须使用ng-show和ng-hide才能做到这一点.如何使用UI路由器解决这个问题？

谢谢!

Answer 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> 

除了切换到include方法,我还为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'
        }
    }
});

Answer 2

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

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