Chỉ thị AngularJS, bọc nội dung và giữ các thuộc tính trên phần tử gốc

Question

Tôi khá mới đối với AngularJS và vẫn đang học.

Tôi gặp một chút khó khăn khi tạo chỉ thị bao bọc phần tử (và con của nó) mà chỉ thị được áp dụng cho. Tôi không hiểu tại sao kịch bản dường như phổ biến này lại quá khó khăn khi xem xét việc có bao nhiêu thứ phổ biến khác trong AngularJS, vì vậy nó rất có thể là tôi đang thiếu thứ gì đó ở đây.

Điều tôi muốn làm là bọc phần tử đã chọn vào div. Tôi đang sử dụng transclude để giữ nguyên phần tử chọn gốc và nội dung của nó nhưng tôi không thể làm cho nó hoạt động chính xác.

HTML trông như thế này:

<select mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"></select> 

... và chỉ thị của tôi trông như thế này:

directiveModule.directive("mlbSelect", function(){ 
    return { 
     template: '<div class="mlb-select">' 
        + '<select ng-transclude></select>' 
        + '</div>', 
     transclude: 'element', 
     replace: true 
    } 
}); 

HTML kết quả trông như thế này:

<div class="mlb-select ng-pristine ng-valid" mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"> 
    <select ng-transclude class="ng-scope"></select> 
</div> 

Dĩ nhiên , đây không phải là điều tôi muốn. Tại sao các thuộc tính của phần tử select của tôi được thêm vào div gói và không phải là phần tử mà tôi chỉ định với thuộc tính ng-transclude? Phần tử select cần giữ lại các thuộc tính ng-options và ng-model.

Tôi cần làm gì để thực hiện việc này?

Answer 1

AFAIK cách duy nhất để làm điều này là để xác định các chỉ thị với nhúng trong một phần tử wrapper, ví dụ .:

<div mlb-select> 
    <select ...></select> 
</div> 

Tất nhiên không có điểm trong việc này nếu trường hợp youe là chính xác như trên.

nhúng trong bối cảnh của câu hỏi này xấp xỉ các công trình như:

1. Nội dung nhúng là nội dung của phần tử có chỉ thị với transclude: true; trong trường hợp của bạn, nội dung của số <select>, trống!
2. Nội dung được nhúng vào được đặt bên trong phần tử chỉ định ng-transclude trong mẫu của chỉ thị.