Thêm chỉ thị từ bên trong một chỉ thị khác trong angularjs

Question

Thêm chỉ thị từ bên trong một chỉ thị khác, làm cho trình duyệt bị treo.

im cố gắng để làm gì là

1) Thay đổi một chỉ thị yếu tố tùy chỉnh (như <h7></h7>) bên trong hàm biên dịch. Bằng cách này, trình duyệt bị treo.

mã:

<h7>TEST</h7> 
    animateAppModule.directive('h7', function($compile){ 
     return { 
      restrict:"E", 
      compile:function(tElement, tAttrs, transclude){     
       tElement[0].setAttribute("ng-class", "{selected:istrue}"); 
       return function(scope, iElement, iAttrs){ 
        //$compile(iElement)(scope); 
       } 
      } 
     } 
    }) 

Nếu tôi bỏ ghi chú dòng này //$compile(iElement)(scope);, trình duyệt bị treo. Bạn có thể bỏ ghi chú dòng trên cho số này http://jsfiddle.net/NzgZz/3/ để xem trình duyệt bị treo.

Tuy nhiên, việc treo trình duyệt không xảy ra nếu tôi có thuộc tính mẫu trong chỉ thị h7, như được hiển thị trong phần này. http://jsfiddle.net/KaGRt/1/.

Trong tổng thể những gì im cố gắng để đạt được là

Tôi muốn agument mẫu, với các chức năng mới với sự giúp đỡ của các chỉ thị induvidual. Bất cứ thứ gì như kiểu trang trí. Tôi đang làm điều này bên trong chức năng biên dịch của một chỉ thị trong chuỗi chỉ thị để nó ảnh hưởng đến tất cả các trường hợp của mẫu đó.

Ví dụ giả về những gì tôi đang cố gắng đạt được.

<xmastree addBaloon addSanta></xmastree> 

1) Giả sử xmastree có một mẫu - <div class="xmastree" ng-class={blinks:isBlinking}></div>

2) Giả sử addBaloon có một mẫu <div class="ballon" ng-class={inflated:isinflated}></div> Sau đó, addBaloon biên dịch chức năng nên tăng cường cho mẫu từ bước 1 đến một cái gì đó như thế này

<div class="xmastree" ng-class={blinks:isBlinking}> 
    <div ng-repeat = "ballon in ballons"> 
     <div class="ballon" ng-class={inflated:isinflated}></div> 
    </div> 
</div> 

3) Nói addSanta có mẫu <div class="santa" ng-class={fat:isFat}></div> Sau đó, addSanta chức năng biên dịch nên tăng cường cho mẫu từ bước 2 đến một cái gì đó như thế này

<div class="xmastree" ng-class={blinks:isBlinking}> 
    <div ng-repeat = "ballon in ballons"> 
     <div class="ballon" ng-class={inflated:isinflated}></div> 
    </div> 
    <div ng-repeat = "santa in santas"> 
     <div class="santa" ng-class={fat:isFat}></div> 
    </div> 
</div> 

Sau khi tất cả các biên soạn, nếu tôi chạy mẫu có nguồn gốc từ step3 chống lại một phạm vi có tính chất phù hợp, tôi sẽ có thể để có được HTML.

Answer 1

Gọi $compile trên phần tử của chỉ thị sẽ khiến cho chỉ thị đó chạy lại, sau đó lặp lại quy trình đó - mãi mãi. Trong mã nguồn góc của nhiều chỉ thị, bạn có thể thấy rằng họ xử lý tình huống này như sau: $compile(element.contents())(scope); sử dụng element.contents() thay vì chỉ element(). Điều đó có nghĩa là mọi thứ bên trong phần tử được biên dịch và các chỉ thị/các ràng buộc dữ liệu được đăng ký và không có vòng lặp nào được tạo ra.

Nếu bạn cần $compile chính phần tử, hoặc thay thế toàn bộ thành phần gốc hoặc xóa chỉ thị ban đầu khỏi nó (loại bỏ thuộc tính, thay đổi loại nút, v.v.) trước khi biên dịch.