AngularJS - Sử dụng Partials động trong các phần khác

Question

Tôi tương đối mới đối với AngularJS và muốn biết khả năng kéo các mẫu một phần một cách linh hoạt như thế nào. Hãy xem xét mô đun trừu tượng này (và được đơn giản hóa cho ví dụ này). Bản thân nó sẽ là một phần mẫu sẽ được sử dụng lại trong suốt ứng dụng.

phần Mô-đun Markup

<div class="module"> 
    <h2 class="module-title">{{module.title}}</h2> 

    <div class="module-content"> 
     {{module.content}} 
    </div> 

</div> 

Sau khi lấy một số mặt hàng dữ liệu, tôi có thể muốn cho module.content trở thành một chuỗi đơn giản của văn bản, không có vấn đề đó. Điều gì sẽ hữu ích nếu tôi có thể chèn động các phần mẫu khác vào module.content dựa trên dữ liệu tôi đang làm việc. Nói ví dụ trong phản ứng của tôi, tôi có một danh sách các tiêu đề tôi muốn hiển thị, có thể lấy một phần mẫu xử lý các tiêu đề không? Và ở một vị trí khác, module.content có thể là một phần mẫu xử lý một thư viện hình ảnh.

Bất kỳ đầu vào hoặc hướng nào sẽ được đánh giá rất nhiều!

Answer 1

Có một vài cách tiếp cận có sẵn cho bạn.

Đặt cược tốt nhất của bạn là thêm directive của riêng bạn. Mở rộng trên ví dụ của bạn:

module.directive('myModule', function() { 
    return { 
    restrict: 'A', 
    scope : { 
     title : '@' 
    }, 
    templateUrl : '/partial/module.html', 
    transclude : true 
    }; 
}); 

Chúng tôi sẽ sử dụng sự chuyển đổi để làm cho nội dung linh hoạt hơn. Bây giờ phần:

<div class="module"> 
    <h2 class="module-title">{{title}}</h2> 

    <div class="module-content" ng-transclude></div> 
</div> 

Với chỉ thị này được cài đặt, bạn có thể sử dụng HTML sau:

<div my-module title="{{module.title}}"> 
    {{module.content}} 
</div> 

Một lựa chọn khác là sử dụng các chỉ thị ng-include. Đây là một nhúng đơn giản của một phần, sự khác biệt được rằng cuộc sống một phần nhúng trong phạm vi giống như bối cảnh của nó đã được đưa vào.

<div ng-include="module.partialUrl"></div> 

Trong trường hợp trên, góc sẽ transclude partial tại URL tại $scope.module.partialUrl. (Chỉnh sửa: điều này có nghĩa là bạn có thể tự động thay thế giao diện người dùng bằng cách thay thế biến phạm vi được sử dụng bởi ngInclude. Tuyệt vời, phải không?)

Nếu bạn đang tái sử dụng cùng một phần để tránh mã lặp lại, sau đó chỉ cần bao quanh URL trong một báo giá:

<div ng-include="'/partial/foo.html'"></div>