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)

The reason you were getting the loop was that you call $compile on the same element and so the compile function gets called again. — kvetis
– kvetis, Commented Jan 28, 2015 at 13:31

Mark Rajcok · Accepted Answer · 2013-04-11 15:20:38Z

29

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

edited Apr 11, 2013 at 15:20

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

answered Apr 11, 2013 at 13:32

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eduard Gamonal Over a year ago

hi, yep, this is what I tried first but it preserves original attributes:

<div style="width: 10px; height: 0.0px" class="this is my subscreen div ng-isolate-scope ng-scope" y="0.0" x="10" width="1024.0" height="768.0" subscreen=""> </div>

this made me think that I had to use the compile function but return function(scope) { $compile(el)(scope); } makes the browser crash you can inspect the generated code in jsfiddle too

Langdon Over a year ago

I've modified the answer. I wouldn't spend too much time worrying about the markup though, since Angular takes liberties with it. Is there some reason you can't have x="10.0" left in the HTML?

Eduard Gamonal Over a year ago

yep, sometimes it won't be "x" or "y" but "width" and other attributes that can define the layout of components. the value will be the same as in css, so it won't be a pain in the neck now, but in the future it might be hard to maintain. your answer works! thanks a lot.

Michael Cornel Over a year ago

Thanks, element.removeAttr() is the correct answer and did work for me, too.

Collectives™ on Stack Overflow

AngularJS remove attributes

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related