angularjs - AngularJS删除属性

Question

我有一条指令，用一些常规HTML替换了我的自定义标签。
我想删除一些属性。例如，给定语法

<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显示了数千次）

Answer 1

除非我没有其他要求，否则您应该能够使用隔离范围和类似以下的模板：

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