transform value of a textarea as soon as it becomes visible

Question

I have a textarea which is hidden by default using ng-show="somecondition" i change somecondition on my code and the text area becomes visibe.

The text bind to textarea has <br /> tags in it. I want to remove the <br /> as soon as the textarea becomes visible.

I have no idea where to bind the function to remove br.

If i create a directives there is no event like load on textarea.

any one has an idea ?

Note: as the variable bind to textarea is also bind to other elements i cannot filter the <br /> in app startup.

Answer 1

Assuming you don't want to just make a custom directive, and tie into the ngModel modelValue/viewValue hooks, you could use a simple watch in your controller as suggested in the comments. Since you didn't post any of your JS, I'm going to make some assumptions but you should get the gist. Note: I don't like $scope variables (see Dot Rule) so I use controller assignments instead.

app.controller("someController", function($scope)
{
    var self = this;

    this.somecondition = false;
    this.bound_data = "testing<br />123";

    $scope.$watch(function() { return self.somecondition; }, function(newVal, oldVal)
    {
      if (newVal)
      {
         self.bound_data = self.bound_data.replace("<br />", "\n");
      }
      else
      {
         self.bound_data = self.bound_data.replace("\n", "<br />");
      }
    }
});

My personal preference would be to keep the data with NewLines and write a custom Filter that converts NewLines into <br /> tags when rendering outside the textarea, but if you're already dealing with stored-data that has <br /> tags in it, using a Watch or Custom Directive with ngModel is the way to go. Note that if you're then having to save this data with the <br /> tags you'll want to do the same transformation when saving - probably easiest to just set the somecondition variable back to the default so that the code in the Watch does the transformation for you automatically - e.g.:

self.save = function()
{
    // fires the watch transform
    self.somecondition = false;

   // now save your data with the <br /> tags in-tact
}