Chỉ thị tạo phạm vi con trong AngularJS

Question

Khi tạo các biểu mẫu phức tạp, tôi thấy cần tách một số phần của quan điểm của tôi thành các phạm vi con khác nhau để có thể có các thuộc tính trực quan riêng lẻ.

Ví dụ tốt có thể đang triển khai hành vi 'nhấp để chỉnh sửa': khi bạn có một html để xem một cái gì đó và một cái khác cần chỉnh sửa.

Một trong những giải pháp là tạo ra chỉ thị vi sẽ có phạm vi phân lập. Nhưng trong trường hợp nếu đánh dấu html cho các thuộc tính khác nhau khác nhau rất nhiều, bạn cần phải có loại "đôi transclusion" (tự biên dịch mẫu khi chuyển đổi).

Vì vậy, đơn giản hơn là có một số bản sao nhỏ, nhưng hiển thị một cách thẳng thắn những gì đang diễn ra với chế độ xem. Điều này giúp đơn giản hóa việc đánh dấu rất nhiều.

Dưới đây là một số mẫu mã để minh họa vấn đề rằng:

<span class="editable" > 
    <span ng-hide="editing"> 
    {{user.first}} <span ng-click="editing = true"><i class="icon-pencil"></i></span> 
    </span> 
    <span ng-show="editing"> 
    <input type="text" ng-model="user.first"> 
    <span ng-click="editing = false"><i class="icon-ok"></i></span> 
    </span> 
</span> 
<span class="editable" > 
    <span ng-hide="editing"> 
    {{user.last}} <span ng-click="editing = true"><i class="icon-pencil"></i></span> 
    </span> 
    <span ng-show="editing"> 
    <input type="text" ng-model="user.last"> 
    <span ng-click="editing = false"><i class="icon-ok"></i></span> 
    </span> 
</span> 

Trong kịch bản này 'phạm vi con' là đầu tiên mà đi vào tâm trí.

Nhưng tôi đã không tìm thấy chỉ thị mà chỉ đơn giản là tạo ra phạm vi mới trong AngularJS. Có cái nào không?

Answer 1

Là một trong những giải pháp rất thẳng Tôi đã viết một chỉ thị một dòng đơn giản:

.directive('childScope', function() { 
    return { scope: true, restrict:'AE' } 
}); 

Và sử dụng nó chỉ thêm vào <span class="editable" child-scope> trong ví dụ nguồn của tôi.

Nhưng có thể có một số chỉ thị chuẩn để thực hiện điều đó?

Nếu không, tôi coi giải pháp này có thể hữu ích cho người khác.