AngularJS：在不丢失范围的情况下具有路由的多个视图

我正在尝试实现一个经典的列表/详细信息UI。单击列表中的项目时，我希望在仍显示列表的同时显示该项目的编辑表单。我试图绕过Angular的每页1视图限制，并决定将所有URL路由到同一控制器/视图。（也许这是我问题的根源，我愿意接受其他选择。）

路由：

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

视图（/Partials/Users.html）：

问题：

单击编辑链接时，控制器将使用新范围重新实例化，因此我必须重新初始化用户列表。（在一个更复杂的示例中，我可能会将用户的输入绑定到模型，这也会丢失。）我更愿意保留前一个路由中的范围

我更喜欢使用一个单独的控制器（或者像许多其他Angular开发人员抱怨的那样，能够显示多个视图！），但这会导致同样的问题，即失去范围

尝试使用ui路由器：

它们有嵌套视图，并且比角度默认路由更容易进行状态管理：-）

我发现对于这种情况来说是天赐良机。它允许您在管线更改时保留范围，并允许多个控制器共享同一管线，而无需嵌套视图

---

如果您的页面上有两个以上的视图，我建议使用Angular Multi View。否则，当使用ui路由器时，嵌套多个视图会很快变得混乱。

核心AngularJS不支持多个视图。您可以将此库用于此目的，它支持页面上任意数量的嵌套视图，其中每个级别都使用自己的控制器和模板独立配置：

它比ui路由器简单得多。示例配置可能如下所示：

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/prefs',    's1.prefs').
when('/section1/:id',      's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).

within().

    segment('home', {
        templateUrl: 'templates/section1/home.html'}).

    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).

    within().

        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

        segment('edit', {
             templateUrl: 'templates/section1/item/edit.html'}).

        up().

    segment('prefs', {
        templateUrl: 'templates/section1/prefs.html'}).

    up().

segment('s2', {
    templateUrl: 'templates/section2.html',
    controller: MainCtrl});

---

我也遇到了同样的问题，我个人不喜欢插件，因为它们不是绝对不可避免的。我刚把单身的部分搬到了一家服务公司

在我的例子中，有：id[/：mode]路由，如果用户仅仅更改了模式或id，我希望以不同的方式做出反应。因此，我必须知道以前的id

因此，有一个使用activate方法更新其状态的服务。每次使用以下代码重新初始化作用域

module.controller('MyController', ['$scope', '$routeParams', 'navigator', function($scope, $routeParams, navigator) {
    var id = null;
    var mode = null;

    if (typeof($routeParams.id)!='undefined')
    {
        id = $routeParams.id;
    }

    if (typeof($routeParams.mode)!='undefined')
    {
        mode = $routeParams.mode;
    }

    navigator.activate(id, mode);

    $scope.items = navigator.items;
    $scope.activeItem = navigator.activeItem;
    $scope.modes = navigator.modes;
    $scope.activeMode = navigator.activeMode;
}]);

---

在activate method中，我可以将id与singleton的activeItem.id进行比较，并做出不同的反应。

谢谢！遵循他们的教程和示例并不容易，因此对于其他尝试实现相同模式的人，我建议您为每个视图创建一个“状态”，并使用嵌套状态来允许共享范围。我想看看您是如何做到这一点的。我在选择路由器时遇到了同样的问题。@timothy是UI路由器的替代品，它有一个简单的视图通道（没有神奇的东西）views@views等等…只是所有视图的简单命名）。。。如果这是您的问题的原因（UI路由器视图模型已经收到了相当多的批评，除了非常简单的情况外，许多人似乎很难使用它）的可能重复

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/prefs',    's1.prefs').
when('/section1/:id',      's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).

within().

    segment('home', {
        templateUrl: 'templates/section1/home.html'}).

    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).

    within().

        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

        segment('edit', {
             templateUrl: 'templates/section1/item/edit.html'}).

        up().

    segment('prefs', {
        templateUrl: 'templates/section1/prefs.html'}).

    up().

segment('s2', {
    templateUrl: 'templates/section2.html',
    controller: MainCtrl});

module.controller('MyController', ['$scope', '$routeParams', 'navigator', function($scope, $routeParams, navigator) {
    var id = null;
    var mode = null;

    if (typeof($routeParams.id)!='undefined')
    {
        id = $routeParams.id;
    }

    if (typeof($routeParams.mode)!='undefined')
    {
        mode = $routeParams.mode;
    }

    navigator.activate(id, mode);

    $scope.items = navigator.items;
    $scope.activeItem = navigator.activeItem;
    $scope.modes = navigator.modes;
    $scope.activeMode = navigator.activeMode;
}]);