AngularJS: ghi nhớ trạng thái/thiết lập các khung nhìn phức tạp với các tuyến

Question

Trong một ứng dụng trang duy nhất, có cách nào chuyển đổi qua lại sang một tuyến AngularJS và hiển thị nó trở lại trạng thái giống như trước đây không?

Thông thường, điều này sẽ được triển khai bằng dữ liệu ràng buộc trong phạm vi gốc. Mặc dù điều này rất dễ thiết lập cho chế độ xem nhẹ nhưng nó có thể cồng kềnh khi thực hiện nó cho các chế độ xem chứa nhiều phần tử đồ họa.

Dưới đây là một ví dụ, nơi có tình trạng tuyến đường trước nhớ có thể nâng cao kinh nghiệm người dùng: ở trang sau, hãy tưởng tượng rằng

• bạn đứng trên khoản 1 và chọn Tab 2
• sau đó di chuyển đến mục 2
• cuối cùng chuyển về khoản 1: Tab 2 không được chọn nữa :-(

http://angular-route-segment.com/src/example/#/section1/1

Dường như các khung nhìn bị phá hủy/xây dựng khi chuyển đổi qua lại giữa các tuyến đường.

Một giải pháp sẽ là về lưu trữ trạng thái của giao diện người dùng trong một phạm vi cha mẹ nhưng nó có những cạm bẫy sau:

• tạo một đối tượng lưu trữ tất cả những chi tiết nhỏ của giao diện người dùng
• tạo phức tạp Logic về -saving và- đặt giao diện người dùng trong tình trạng tương tự như trước
• lưu trữ nhà nước UI trong một mô hình dữ liệu không âm thanh MVC-ish

Sử dụng chương trình/ẩn div lưu trữ các khung nhìn lưu trạng thái nhưng sau đó không có tuyến đường nào được sử dụng và việc chuyển đổi kinh doanh phải được thực hiện bằng tay. Tôi thích sử dụng các tuyến đường vì 1. của điều hướng lịch sử trình duyệt (băm trong url) và 2. nó rất dễ dàng để thiết lập.

Việc trạng thái giao diện người dùng không được nhớ giống như việc Chrome tải lại trang khi chuyển qua lại giữa các tab: không thân thiện với người dùng.

Có đường vòng không?

Answer 1

Phương pháp tiếp cận đường dẫn $ của bạn rất thú vị. Các dịch vụ $ routeSegment có thể cắm vào sự kiện $ routeChangeStart để

• Bằng cách nào đó giữ một "lịch sử con đường phụ" trên tất cả các đường dẫn thấy cho đến nay, có lẽ chỉ dành cho những rõ ràng cấu hình để giữ trạng thái UI của họ. Trong ví dụ của bạn cho đường dẫn "/ section1/1" đường dẫn con được lưu trữ sẽ là "/ Y" nếu tab 2 được chọn. Mọi thứ trở nên thú vị, cũng như các đường dẫn động với $ routeParams có thể cần được đề cập đến.
• Sử dụng lịch sử này để chuyển hướng bằng cách sử dụng $ location.path trong trình xử lý sự kiện. Vì vậy, sự kiện $ routeChangeStart với next.originalPath là "/ section1/1" có thể được chuyển hướng đến "/ section/1/Y"