AngularJS loại bỏ các thuộc tính

Question

Tôi có một chỉ thị thay thế thẻ tùy chỉnh của tôi bằng một số HTML thông thường. Có một số thuộc tính mà tôi muốn xóa. Ví dụ, với cú pháp

<ui mybutton width="30"></mybutton> 

chỉ thị của tôi biến nó thành

<div width="30" class="btn">bla bla </div> 

Tôi muốn loại bỏ "width=30" và thêm style="width:{{old width value here}}"

Tôi đã thử nghiệm với các biên dịch và liên kết chức năng. Tôi có nên làm điều đó trong biên dịch hoặc trong chức năng liên kết?

Tôi nghĩ rằng tôi đã phải làm điều đó trong chức năng biên dịch bởi vì tôi muốn thực hiện một sửa đổi trong mẫu.

Xem trực tiếp trong http://jsfiddle.net/WptGC/2/CẢNH BÁO: trình duyệt của bạn có thể bị treo! Xem trực tiếp và an toàn http://jsfiddle.net/WptGC/3/ mã khiến mọi sự cố đều được nhận xét.

.directive('mybutton', function($compile) { 
return { 
    restrict: 'A', 
    //transclude: true, 
    template: '<div class="this is my subscreen div" style="width:{{width}}"></div>', 
    replace: false, 
    /*scope: { 
     width: '@', 
     height: '@', 
     x: '@', 
     y: '@' 
    },*/ 

    compile: function($tElement, $tAttrs) { 
     console.log("subscreen template attrs:"); 
     console.log($tAttrs); 
     var el = $tElement[0]; 
     //el.getAttribute('width'); 
     var stylewidth = el.getAttribute('width'); 
     el.removeAttribute('width'); 

     return function(scope) { 
      $compile(el)(scope); 
     } 
    } 
} 
}) 

Tôi chỉ nhận được một vòng lặp kỳ lạ (console.log hiển thị lên một vài nghìn lần)

Answer 1

Trừ khi tôi là thiếu một số yêu cầu khác mà bạn chỉ có thể sử dụng cô lập phạm vi và một mẫu như:

http://jsfiddle.net/WptGC/6/

app.directive('backbutton',function(){ 
    return { 
    restrict: 'A', 
    replace:true, 
    scope: { 
     x: '@', 
     y: '@' 
    }, 
    template:'<button style="width: {{x}}px; height: {{y}}px">A back-button template</button>', 
    link: function (scope, element, attrs) { 
     element.removeAttr('x').removeAttr('y'); 
    } 
    } 
});