0

I need to create a directive that uppercase all letter of content of a elem

<div>Hello World!</div>

with addition of all-uppercase 

<div all-uppercase>HELLO WORLD!</div>

My mission is understending how Angular can provide an ability to manipulate text into existing html via "directive"

Please post working code...

Francesco Bianco
  • 519
  • 1
  • 5
  • 12

1 Answers1

1

Though this could have been easily done via CSS directly by just by saying css rule text-transform: uppercase.

Directive version would be, like below. Where you are accessing element text via link function, make it uppercase & put it back to the text of the element.

Directive

.directive('allUppercase', function(){
  return {
    restrict: 'A',
    link: function(scope, element){
       element.text(element.text().toUpperCase());
    }
  }
});

Same thing can be achievable via using angular built in filter called as uppercase

{{ 'Hello World!'| uppercase }}

Demo Of All 3

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299