Declare AngularJS1 directive to uppercase text into existent element

Question

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...

Answer 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