代码之家 › 专栏 › 技术社区 › egervari

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

angular-ui-router angularjs jquery javascript

egervari · 技术社区 · 12 年前

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

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

在UI Router的演示应用程序中,html布局为所有子状态分配了空白空间,但在我正在构建的应用程序中我真的很想隐藏面板,如果它们没有被使用,甚至在输入和退出状态时滑动整个屏幕。我想我必须利用ng show和ng hide才能做到这一点。如何使用UI路由器进行此操作?

谢谢

4 回复 | 直到 12 年前

Tyler Buchea 11 年前

Angular的ui路由器为切换嵌套视图提供了一种干净的方法。

首先将$state注入到假设的“列表页”控制器中。然后将其公开到local$scope:

.controller('ListPageCtrl', function($scope, $state) {
    $scope.$state = $state;
})

我们注入的$state变量有一个很好的“includes”方法$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>

除了切换到includes方法之外,我还为ui视图属性添加了一个唯一的名称。一旦你有两个以上的观点,你就会想说出你的观点。这将使它们更容易在模板和逻辑中跟踪。

为视图添加名称。将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'
        }
    }
});

egervari 12 年前

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

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

JSantaCL 10 年前

无论以何种方式解决这个问题,只要确保在angular应用程序的.run部分中声明如下:

angular.module('yourApp', ['ui.router'])

    .run(
        ['$rootScope', '$state', '$stateParams',
            function ($rootScope, $state, $stateParams){                    
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }
            ]
    )

否则,将无法从内部模板访问$state和$stateParams。在我的头撞到键盘后,我读了ui路由器文档并检查了示例应用程序的代码,因为这不起作用。

Community Mohan Dere 9 年前

您的url必须使用querystring反映状态模式: /stuff/1?edit 或 /stuff/1 代表 /stuff/1?view

你可以使用 reloadOnSearch=false 指示AngularJS不重新加载视图:

http://docs.angularjs.org/api/ngRoute.$routeProvider

在您的 controller ,检查状态模式( view 或 edit )使用 $routeParams 。捕获编辑单击事件,将模型传递到工具栏并相应地切换其可见性。

查看那些有趣的链接:

Can you change a path without reloading the controller in AngularJS?

Updating URL in Angular JS without re-rendering view