AngularJS remove attributes

Question

I have a directive that replaces my custom tag with some regular HTML. There are some attributes that I'd like to remove. For example, given the syntax

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

my directive transforms it into

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

I want to remove that "width=30" and add style="width:{{old width value here}}"

I've been experimenting with the compile and link function. Should I do that in the compile or in the link function?

I thought I had to do it in the compile function because I want to make a modification in the template.

See it live in http://jsfiddle.net/WptGC/2/ WARNING: your browser might hang! See it live and safely http://jsfiddle.net/WptGC/3/ the code that makes everything crash is commented.

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

I'm just getting a strange loop (that console.log shows up a few thousand times)

Answer 1

Unless I'm missing some other requirement you should just be able to use isolate scope and a template like:

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