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

问题描述

我想实现一个经典排行榜/详细信息UI。在列表中单击某个项目时，我想显示该项目的编辑表单的同时还显示列表的。我试图解决角的1 - 视图 - 每页限制，并决定其路由到同一个控制器/视图的所有URL做到这一点。 （也许这是我的问题的根源，我接受的替代品。）

路由：

  $ routeProvider
    。当（'/列表'，{templateUrl：/Partials/Users.html'，控制器：UserController中}）
    。当（'/编辑/：用户ID'，{templateUrl：/Partials/Users.html'，控制器：UserController中}）
    不然的话（{redirectTo：'/列表'}）;
 

视图（/Partials/Users.html）：

 ＆LT;！ - 用户的列表 - ＆GT;
＆LT; D​​IV NG重复=用户用户＆GT;
    ＆LT; A HREF =* /编辑/ {{user.Id}}＆gt;编辑{{user.Name}}＆LT; / A＆GT;
＆LT; / DIV＆GT;＆LT;！ - 编辑表单 - ＆GT;
＆LT; D​​IV＆GT;
    {{SelectedUser.Name}}
＆LT; / DIV＆GT;
 

控制器：

 函数UserController中（$范围，$ routeParams）{
    //型号为列表
    $ scope.Users = GetUserListFromService（）;    //型号为编辑表单
    如果（$ routeParams.UserId！= NULL）
        $ scope.SelectedUser = GetUserFromService（$ routeParams.UserId）;
}
 

问题：

1. 当点击一个编辑链接，控制器重新实例一个新的范围，所以我不得不重新初始化用户列表。 （在一个更复杂的例子，我可以从存储绑定到模型的用户输入和这也将丢失。）编号preFER坚持从previous路线范围。


2. 我preFER使用单独的控制器（或者像许多其他开发商角度有抱怨，有多个的能力显示观点！），但是，导致失去范围的同样的问题。

解决方案

尝试使用UI路由器：的http：// github上.COM /角度的UI / UI路由器。

他们有嵌套的意见，更容易管理的状态比角度默认路由： - ）

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屋！