AngularJS: setting value of textarea from template

Question

In my application, users are given the option to send a confirmation message. This message is pregenerated with a default value (which depends on some other context), but should be editable by the user.

In angularJS, the intent is that the pregenerated messages comes from a template. So for instance I would have Msg1.html and Msg2.html, each of which includes MsgCommon.html (presumably using ng-include). The resulting file is then interpolated with the current scope to provide the text version of the pre-generated message, which I would presumably put in a textarea.

But I haven't found how to do this with angularJS. AngularJS rightly does not process the contents of , so I can't put a ng-include in there. And presumably there should be a ng-model on the textarea, so I would need to initialize in my controller the model element after processing the template. The following almost works:

$http.get('msg1.html', {cache: $templateCache}).then(function(resp) {
   $scope.msg = $interpolate(resp.data)($scope);
});

in html:
<textarea ng-model='msg'></textarea>

This correctly interpolates strings like {{...}} but will not process directives like ng-repeat or ng-include. I guess I need to use some form of $compile instead, but this expects a DOM string or element, and my message is not HTML.

Any ideas on how this could be done ?

Can you show more code surrounding this one? What calls $http.$get? — Esteban Felix
– Esteban Felix, Commented Oct 16, 2014 at 17:11
Why do you want to use directives in your message? As you wrote, your message is plain text so you will not have any DOM nodes to attach directives like ng-repeat. — Reto Aebersold
– Reto Aebersold, Commented Oct 16, 2014 at 17:24
The message is a confirmation that a customer bought a number of products. Among other things, we want to list the products... — manuBriot
– manuBriot, Commented Oct 16, 2014 at 18:16

Reto Aebersold · Accepted Answer · 2014-10-16 17:51:14Z

2

This solution is for demonstration purposes only. I do not recommend to use this in a real world scenario. I think it is better to use just $interpolate and create the necessary logic right in your controller. (ie. Instead of using ng-repeat you could concatenate your list in your controller and interpolate this string)

The idea of this ugly solution is to compile a template and the use the innerText of the element to get the plain text only (Plunker):

$templateRequest('msg1.html').then(function(resp) {
  var el = angular.element('<div></div>');
  var templateScope = $scope.$new();

  templateScope.name = 'Foo'

  templateScope.tasks = ['t1', 't2', 't3', 't4'];

  el.html(resp);
  $compile( el.contents() )( templateScope );

  setTimeout(function(){
    $scope.msg = el[0].innerText;
    $scope.$apply();
  }, 10);
});

answered Oct 16, 2014 at 17:51

Reto Aebersold

16.7k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

manuBriot Over a year ago

I agree with putting the logic in the controller. But in this case, the possible message templates are edited by third parties who are not programmers, so I'd rather they edit the template itself. I will test your solution, I like the idea at least for now. That's a site I am porting to angularJS, we can possibly revamp it at some point to remove the need for the hack. Thanks !

Collectives™ on Stack Overflow

AngularJS: setting value of textarea from template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related