Cách ưa thích của dữ liệu tải lười cho ng-include trong Angular là gì?

Question

Tôi tạo các hàng (cha mẹ) khi lặp qua danh sách các đối tượng sử dụng ng-repeat. Tôi cũng tạo ra một hàng ẩn. Hàng hiển thị chứa dữ liệu cơ bản của soms và hàng ẩn (chi tiết) chứa tất cả dữ liệu. Tôi muốn hàng chi tiết hiển thị khi hàng cha được nhấp vào. Và tôi chỉ muốn tải dữ liệu khi hàng chi tiết hiển thị. Ngoài ra, một khi các chi tiết của một hàng đã được tải, tôi không muốn đi đến máy chủ một lần nữa.

tôi đã tạo ra một phần cho các chi tiết xem, do đó, mã của tôi trông như thế này:

<div ng-include="'/Customer/View'"></div> 

Tắt Tất nhiên tôi có thể xác định vị trí để /Customer/View/12, nhưng sau đó tất cả các dữ liệu được nạp, ngay cả khi không có yêu cầu .

Vì vậy, con đường để thực hiện điều này là gì? Ai đó có thể chỉ cho tôi đi đúng hướng?

Answer 1

Một cách bạn có thể thực hiện việc này là sử dụng biến số với ngInclude và đặt biến đó thành nhấp chuột vào hàng gốc.

Here is a sample fiddle và nếu bạn sử dụng tab mạng của Chrome (hoặc trình duyệt khác), bạn có thể thấy rằng url trong bao gồm sẽ không được yêu cầu cho đến khi bạn nhấp vào một mục.

<div ng-repeat="item in items" ng-click="url = item"> 
    <span ng-hide="url">Click to load</span> 
    <span ng-show="url">Loaded item {{url}}</span> 
    <div ng-include="url"></div> 
</div> 

Ở mức độ cao những gì đang xảy ra ở đây là:

1. url ban đầu không được đặt để bất cứ điều gì để ng-include đã không có gì để lấy
2. Khi nhấp vào một mục cha mẹ đặt biến url để một cái gì đó sử dụng ng-click (bạn có thể sử dụng chức năng phạm vi để kiểm soát nhiều hơn đối với url như trong this example)
3. Biến bên trong phạm vi đó hiện được đặt thành ng-include có thể lấy url khi nó được yêu cầu trên nhấp chuột

Lưu ý: Bạn sẽ không phải khai báo url biến trong javascript từ ngRepeat tạo ra một phạm vi mới cho mỗi mục bạn đang Looping qua nên hành động nhấp chuột thiết lập biến sẽ chỉ ảnh hưởng đến phạm vi hiện tại mà bạn đang làm việc.