CODEWITHSUNDEEP
angularjs
Rai
Rai

Reputation: 394

Transform text between element AngularJS

This has been bothering me for about an hour now due to my lack of AngularJS proficiency. I am working through trying to understand directives. This example regarding capitalizing text from a directive seems clear, but how to you capitalize text in the following example through a directive without referring to "myMessage.description" within the directive?

<td my-directive>{{myMessage.description}}</td>

I know its staring me right in the face, but I cannot seem to find a direct answer to this probably because I am not phrasing my question correctly in my mind. My thought is that I would have to refer to something hanging off of attrs.value or attrs.text within the link function. If so, how do I update the view with the new value?

Upvotes: 1

Views: 112

Answers (1)

shaunhusain
shaunhusain

Reputation: 19748

The typical way to transform text in a view is to just use a filter in the interpolation, there's a built in uppercase filter so you can just add |uppercase to the interpolated expression.

http://plnkr.co/edit/FbqLdnu3AAW83uy2w31u?p=preview

<p>Hello {{foo.bar|uppercase}}!</p>

Here's a way you could do it with a directive:

http://plnkr.co/edit/xADMMdyuklMgJ9IdmocT?p=preview 

 .directive('upperCase', function($interpolate){
    return {
      // Compile function runs before children are compiled/processed
      // so we get the initial contents in this function
      compile:function(iElem, iAttrs){

        var curContents = iElem.html();
        //After we grab the contents we empty out the HTML so
        //it won't be processed again.
        iElem.html('');

        // The compile function can return a link function
        // this gets run to get the scope for the instance
        // and uses the $interpolate service to do the same
        // thing angular would do when it sees the {{}}
        // with the added step of running toUpperCase
        return function(scope, iElem, iAttrs){
          iElem.html($interpolate(curContents)(scope).toUpperCase())
        }
      }
    };
  });

Upvotes: 2

Related Questions