Lựa chọn có điều kiện của chỉ thị

Question

Tôi muốn chọn chỉ thị nào sẽ sử dụng dựa trên biến. Cụ thể, tôi có các mục của nhiều loại khác nhau trong danh sách, vì vậy tôi muốn sử dụng loại mục để chọn chỉ thị có thể hiển thị nó.

ng-switch có vẻ như dành cho mục đích này. Tuy nhiên, nó thêm tất cả các lựa chọn chuyển đổi vào DOM, sau đó ẩn tất cả trừ một. Cách tiếp cận đó dường như không hiệu quả nếu có nhiều loại mục hoặc danh sách dài để hiển thị. Ngoài ra, bằng cách sử dụng một chuyển đổi đặt logic trong HTML. Ưa thích sẽ là một 'mẫu chiến lược' rằng sẽ chỉ cần chọn các chỉ thị đúng, có lẽ như

<display-{{item.type}} data="item.data" /> 

nơi chỉ là 'displayType1', 'displayType2', và vân vân. Tuy nhiên, cú pháp này dường như không hoạt động, có lẽ vì sự khác biệt giữa các giai đoạn biên dịch và liên kết. Here là một ví dụ để chuyển đổi các mẫu html bên trong một chỉ thị. Nhưng có cách nào để chuyển đổi chỉ thị, giữ lại mô đun của họ?

Answer 1

Thêm giải pháp dựa trên @ CodeGuy2001 lời khuyên .

Cách tiếp cận để thực hiện ở đây là tạo mẫu góc cho mỗi biến thể chỉ thị với tên mẫu khác.

Sau đó, sử dụng ng-include để chọn mẫu cần được sử dụng. Vì ng-include hỗ trợ liên kết dữ liệu với thuộc tính src. Bạn có thể chuyển đổi mẫu và do đó chỉ thị động.

Xem fiddle hoạt động http://jsfiddle.net/xpKwb/2/

Answer 2

Tôi không biết cách thêm tên chỉ thị động như thế. Một vài ý tưởng thay thế:

1) Chỉ cần sử dụng một chỉ thị duy nhất với item.type làm một tham số và có hành động chỉ thị khác nhau tùy thuộc vào giá trị của nó.

2) Thay vì ng-switch, sử dụng ng-nếu đó thực sự loại bỏ các yếu tố từ DOM chứ không phải che giấu nó (như ng-hide hoặc ng-switch)