AngularJS:具有路由的多个视图而不会丢失范围 [英] AngularJS: Multiple views with routing without losing scope

问题描述

我正在尝试实现经典的列表/详细信息 UI.单击列表中的项目时，我想显示该项目的编辑表单同时仍显示列表.我正在尝试解决 Angular 的每页 1 个视图的限制，并决定通过将所有 URL 路由到相同的控制器/视图来做到这一点.(也许这是我问题的根源，我愿意接受替代方案.)

路由:

$routeProvider.when('/list', { templateUrl: '/Partials/Users.html', 控制器: UserController }).when('/edit/:UserId', { templateUrl: '/Partials/Users.html', 控制器: UserController }).otherwise({ redirectTo: '/list' });

视图(/Partials/Users.html):

<div ng-repeat="用户中的用户"><a href="*/edit/{{ user.Id }}">编辑{{ user.Name }}</a>

<!-- 编辑表单--><div>{{ SelectedUser.Name }}

控制器:

function UserController($scope, $routeParams) {//列表的模型$scope.Users = GetUserListFromService();//编辑表单的模型如果 ($routeParams.UserId != null)$scope.SelectedUser = GetUserFromService($routeParams.UserId);}

问题:

1. 单击编辑链接时，控制器会重新实例化为新范围，因此我必须重新初始化用户列表.(在更复杂的示例中，我可以将来自用户存储的输入绑定到模型，这也会丢失.)我更愿意保留上一条路线的范围.
2. 我更喜欢使用单独的控制器(或者，正如许多其他 Angular 开发人员所抱怨的那样，能够显示多个视图！)但这会导致同样的问题，即失去作用域.

解决方案

尝试使用 ui-router:http://github.com/angular-ui/ui-router.

与角度默认路由相比，它们具有嵌套视图和更容易的状态管理:-)

I'm trying to implement a classic list/details UI. When clicking an item in the list, I want to display an edit form for that item while still displaying the list. I'm trying to work around Angular's 1-view-per-page limitation and decided to do it by having all URLs routed to the same controller/view. (Perhaps this is the root of my problem and I'm open to alternatives.)

Routing:

$routeProvider
    .when('/list', { templateUrl: '/Partials/Users.html', controller: UserController })
    .when('/edit/:UserId', { templateUrl: '/Partials/Users.html', controller: UserController })
    .otherwise({ redirectTo: '/list' });

The view (/Partials/Users.html):

<!-- List of users -->
<div ng-repeat="user in Users">
    <a href="*/edit/{{ user.Id }}">Edit {{ user.Name }}</a>
</div>

<!-- Edit form -->
<div>
    {{ SelectedUser.Name }}
</div>

Controller:

function UserController($scope, $routeParams) {
    // the model for the list
    $scope.Users = GetUserListFromService();

    // the model for the edit form
    if ($routeParams.UserId != null)
        $scope.SelectedUser = GetUserFromService($routeParams.UserId);
}

Problems:

1. When clicking an edit link, the controller is reinstantiated with a new scope, so I have to re-init the Users list. (In a more complex example I could have input from the user stored bound to the model and this would also get lost.) I'd prefer to persist the scope from the previous route.
2. I'd prefer to use a separate controller (or, as many other Angular developers have complained, the ability to have multiple displayed views!) but that leads to the same issue of losing scope.

解决方案

Try using ui-router: http://github.com/angular-ui/ui-router.

They have nested views and easier state management than angular default routing :-)

这篇关于AngularJS:具有路由的多个视图而不会丢失范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！