AngularJS:具有路由的多个 View 而不会丢失范围

Question

我正在尝试实现一个经典的列表/详细信息 UI。单击列表中的项目时，我想显示该项目的编辑表单，同时仍显示列表。我正在尝试解决 Angular 的 1-view-per-page 限制，并决定通过将所有 URL 路由到同一个 Controller / View 来做到这一点。 (也许这是我问题的根源，我对替代方案持开放态度。)

路由:

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

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

问题:

单击编辑链接时， Controller 会使用新范围重新实例化，因此我必须重新初始化用户列表。 (在一个更复杂的示例中，我可以将来自用户的输入存储到模型中，这也会丢失。)我更愿意保留前一个路由的范围。

我更喜欢使用单独的 Controller (或者，正如许多其他 Angular 开发人员所提示的那样，拥有多个显示 View 的能力!)但这会导致同样的问题，即失去范围。

Answer 1

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

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