AngularJS刪除屬性

我有一個指令，用一些常規的HTML替換我的自定義標籤。我想刪除一些屬性。例如，給定的語法AngularJS刪除屬性

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

我的指令將其轉換爲

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

我想刪除"width=30"並添加style="width:{{old width value here}}"

我一直在編譯和鏈接功能試驗。我應該在編譯還是鏈接功能中做到這一點？

我以爲我不得不在編譯函數中這樣做，因爲我想在模板中進行修改。

看到它住在http://jsfiddle.net/WptGC/2/警告：您的瀏覽器可能會掛起！ 實時安全地看到它http://jsfiddle.net/WptGC/3/讓一切崩潰的代碼都被評論了。

.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); 
     } 
    } 
} 
})

我只是得到一個奇怪的循環（即執行console.log顯示了幾千次）

來源

2013-04-11 Eduard Gamonal

的原因，你都拿到了環是你調用$編譯相同的元素，因此編譯函數被再次呼籲。 – kvetis 2015-01-28 13:31:02

除非我失去了一些其他的要求，你就應該能夠使用隔離範圍和模板，如：

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'); 
    } 
    } 
});

來源

2013-04-11 13:32:08 Langdon

您好，是的，這是我第一次嘗試，但它保留了原來的屬性： '

' 這讓我覺得，我不得不使用編譯功能，但'返回功能（範圍）{ $編譯致發光（EL）（範圍）; }'使瀏覽器崩潰你也可以在jsfiddle中檢查生成的代碼 – 2013-04-11 14:02:50

我修改了答案。不過，我不會花太多時間擔心標記，因爲Angular會自由地使用它。是否有某些原因導致您不能在HTML中保留x =「10.0」？ – Langdon 2013-04-11 14:06:35

是的，有時它不會是「x」或「y」，而是「寬度」和其他可以定義組件佈局的屬性。它的價值將與CSS中的相同，所以它現在不會成爲脖子上的痛苦，但在將來可能難以維持。你的答案有效！非常感謝。 – 2013-04-11 14:14:54

AngularJS刪除屬性

回答

相關問題