chỉ thị góc với nhiều mẫu

Question

Nhiệm vụ:

• Để hiển thị liên lạc.
• Liên hệ là dữ liệu JSON, giả sử {name: "Mark", vị trí: "Anh", điện thoại: [...]}.
• Liên hệ có thể được hiển thị theo nhiều cách: compact/chi tiết/tăng cường với thông tin bổ sung (danh bạ chia sẻ - chỉ thêm)

Do mối liên hệ có thể được hiển thị trên các trang khác nhau ở những nơi khác nhau đó là cách tự nhiên để tạo ra chỉ thị (tiện ích) để liên hệ, nhưng đây là câu hỏi: "Cách sắp xếp cùng một tiện ích với nhiều mẫu?"

Options:

1. Tạo một tài khoản chỉ với một mẫu, mà giấu đi phần theo liên hệ với "loại"-mẫu lớn với khả năng rất nhiều ng-switch và ng-nếu
2. Tạo chỉ thị cho từng mẫu - gần như cùng một chỉ thị với mẫu khác nhau (hoặc templateURL)
3. Để load templates dynamically while linking-có vấn đề với nhúng và thay thế (sáp nhập thuộc tính)

Whats expirience của bạn với việc giải quyết những vấn đề này?

Answer 1

Cá nhân tôi nghĩ rằng Tùy chọn 2 cung cấp sự tách biệt rõ ràng giữa các chế độ hiển thị. Tôi đã tạo một working CodePen example để minh họa cách bạn có thể thực hiện việc này một cách rõ ràng bằng cách sử dụng các chỉ thị riêng biệt cho từng mẫu.

Phương pháp tôi đã sử dụng trong ví dụ CodePen của mình sử dụng nhà máy mẫu được đưa vào từng chỉ thị thông qua Angular DI. Việc triển khai nhà máy mẫu rất sạch vì nó chỉ sử dụng các chuỗi mẫu ng-include cho từng chế độ hiển thị được hỗ trợ khác nhau (nhỏ gọn & chi tiết). Các mẫu HTML thực tế (partials) có thể được đặt trong các tệp xem bên ngoài hoặc khối tập lệnh nội bộ.

Sử dụng các chỉ thị tiếp xúc rất dễ:

<contact compact ng-repeat="contact in contacts" ng-model="contact"></contact> 

Điều này tạo ra một phiên bản nhỏ gọn của danh sách liên lạc.

<contact detailed ng-repeat="contact in contacts" ng-model="contact"></contact> 

Điều này tạo danh sách liên hệ chi tiết.

Tôi sẽ thừa nhận rằng tôi chưa triển khai mã như thế này để sản xuất để có thể có khả năng mở rộng hoặc các mối quan tâm khác mà tôi chưa xem xét. Tôi hy vọng mã tôi đã cung cấp trả lời câu hỏi của bạn hoặc ít nhất là cung cấp nguồn cảm hứng để khám phá thêm.

Answer 2

Tôi đã xây dựng một cách tiếp cận mới làm việc trên Adam dụ và cũng sử dụng các mẫu từ docs góc trong đó họ nói về chức năng trong bất động sản https://docs.angularjs.org/guide/directive templateUrl, đây là plunker từ docs góc: http://plnkr.co/edit/h2CSf2WqCLYfPvzL9WQn?p=preview

.directive('myCustomer', function() { 
    return { 
     templateUrl: function(elem, attr){ 
     return 'customer-'+attr.type+'.html'; 
     } 
    }; 
    }); 

Và đây là giải pháp remix của tôi:

http://codepen.io/anon/pen/wawOyz?editors=101

app.factory('templates', function() { 
    return { 
    compact: 'compact', 
    detailed: 'detailed' 
    }; 
}); 

app.directive('contact', function(templates) { 
    return { 
    restrict: 'E', 
    templateUrl: function($elem, $attr){ 
     return templates[$attr.mode];  
    }, 
    scope: { 
     contact: '=ngModel' 
    } 
    }; 
}); 

tôi thích t ý tưởng về việc có tất cả các địa chỉ mẫu trong một nhà máy nhưng tôi thấy chỉ thị cho mỗi chế độ khá lặp đi lặp lại và nếu bạn có nhiều yếu tố sử dụng cách tiếp cận này, bạn sẽ cần phải đặt tên cho chúng (văn bản liên hệ, văn bản email, văn bản công ty) họ không sụp đổ.

Tôi không chắc chắn liệu đây có phải là cách tốt hơn hay không, ngắn hơn và nhiều DRY hơn, nhưng có thể khó kiểm tra hơn hoặc ít tùy biến hơn. Tôi chỉ muốn chia sẻ cách tiếp cận trong trường hợp nó có thể giúp bất cứ ai.