AngularJS:不失范围与路由多个视图(AngularJS: Multiple views wi

2019-08-31 11:39发布

我想实现一个经典排行榜/细节UI。 点击列表中的项目时,我想显示该项目的编辑形式,而仍然显示列表 。 我试图解决角的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):

<!-- 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>

控制器:

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

问题:

  1. 当点击编辑链接,控制器重新实例化一个新的范围,所以我不得不重新初始化用户列表。 (在一个更复杂的例子我可以从存储绑定到模型,这也将迷路的用户输入。)我宁愿从以前的路线坚持的范围。
  2. 我宁愿使用一个单独的控制器(或其他许多开发商角度都在抱怨,有多个的能力显示的视角!),但导致失去范围的同样的问题。

Answer 1:

尝试使用UI路由器: http://github.com/angular-ui/ui-router 。

他们有嵌套的意见,更容易管理的状态比角度默认路由:-)



Answer 2:

多个视图没有核心AngularJS支持。 你可以使用这个库用于这一目的,它支持的页面,其中每个级别都有自己的控制器和模板独立配置上嵌套视图的任何金额:

http://angular-route-segment.com

这是简单得多比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});


Answer 3:

我发现角多视图成为这个场景一大福音。 它可以让你保存范围的路由变化,并允许多个控制器共享相同的路线不筑巢的意见

我建议多角度查看,如果您有您的网页上超过2次。 否则,使用UI路由器时,嵌套多个视图变得混乱真快。



Answer 4:

我想出了同样的问题,我personnaly不喜欢的插件的时候都没有绝对少不了。 我刚搬到单身部分的服务。

在我的情况有:ID [/:模式]的路线,我想不同的反应方式,如果用户更改只是模式或ID了。 因此,我必须知道以前的ID。

因此,有与更新其状态激活方法的服务。 并且范围重新初始化用下面的代码每次。

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方法我可以比较ID,以单身的activeItem.id和反应是不同的。



文章来源: AngularJS: Multiple views with routing without losing scope