cicciodarkast cicciodarkast - 7 days ago 6
AngularJS Question

Declare AngularJS1 directive to uppercase text into existent element

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

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

Comments