AngularJS: Nhiều chế độ xem có định tuyến mà không làm mất phạm vi

Question

Tôi đang cố triển khai giao diện người dùng danh sách/chi tiết cổ điển. Khi nhấp vào một mục trong danh sách, tôi muốn hiển thị biểu mẫu chỉnh sửa cho mục đó trong khi vẫn hiển thị danh sách. Tôi đang cố gắng để làm việc xung quanh giới hạn 1-view-mỗi trang của Angular và quyết định làm điều đó bằng cách có tất cả các URL được định tuyến đến cùng một bộ điều khiển/xem. (Có lẽ đây là gốc rễ của vấn đề của tôi và tôi là mở cửa cho giải pháp thay thế.)

Routing:

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

Quan điểm (/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> 

điều khiển :

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

vấn đề:

1. Khi nhấp vào liên kết chỉnh sửa, bộ điều khiển được khôi phục với phạm vi mới, vì vậy tôi phải bắt đầu lại danh sách Người dùng. (Trong một ví dụ phức tạp hơn, tôi có thể có đầu vào từ người dùng được lưu trữ ràng buộc với mô hình và điều này cũng sẽ bị mất.) Tôi muốn duy trì phạm vi từ tuyến trước đó.
2. Tôi muốn sử dụng bộ điều khiển riêng biệt (hoặc nhiều nhà phát triển Angular khác đã khiếu nại, khả năng có nhiều chế độ xem được hiển thị!) Nhưng điều đó dẫn đến cùng một vấn đề mất phạm vi.

Answer 1

Thử sử dụng ui-router: http://github.com/angular-ui/ui-router.

Họ đã lồng quan điểm và quản lý nhà nước dễ dàng hơn định tuyến mặc định góc :-)

Answer 2

tôi đã tìm thấy Angular Multi View là ngoài sức tưởng tượng cho kịch bản này. Nó cho phép bạn duy trì phạm vi khi thay đổi tuyến đường và cho phép nhiều bộ điều khiển chia sẻ cùng một tuyến đường mà không làm tổ các chế độ xem của bạn.

Tôi khuyên bạn nên sử dụng Angular Multi View nếu bạn có nhiều hơn 2 lượt xem trên trang của mình. Nếu không, khi sử dụng ui-router, việc lồng ghép nhiều chế độ xem thực sự nhanh chóng.

Answer 3

Nhiều chế độ xem không được hỗ trợ trong lõi AngularJS. Bạn có thể sử dụng thư viện này cho mục đích này mà hỗ trợ bất kỳ số lượng quan điểm lồng nhau trên trang, nơi mỗi cấp được cấu hình một cách độc lập với bộ điều khiển và mẫu riêng của mình:

http://angular-route-segment.com

Nó là đơn giản hơn nhiều để sử dụng hơn ui- bộ định tuyến. Cấu hình mẫu có thể trông giống như sau:

$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 4

Tôi đã gặp vấn đề tương tự và tôi không thích plugin khi chúng không thể tránh khỏi hoàn toàn. Tôi chỉ chuyển một phần đơn lẻ sang một dịch vụ.

Trong trường hợp của tôi có: id [/: mode] các tuyến đường và tôi muốn phản ứng theo cách khác nếu người dùng chỉ thay đổi chế độ hoặc id. Vì vậy, tôi phải biết id trước đó.

Vì vậy, có một dịch vụ có phương pháp kích hoạt cập nhật trạng thái của nó. Và phạm vi được reinitialized mỗi lần với đoạn mã sau.

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

Trong phương pháp kích hoạt, tôi có thể so sánh id với hoạt động của singletonItem.id và phản ứng khác nhau.