javascriptangularjsngsanitize

AngularJS - Dynamically created <textarea> using ngSanitize doesn't show (other elements do)


I'm a AngularJS newbie and trying to dynamically create a textarea upon a button click. I'm using the ngSanitize addon, the code works, I'm able to insert plain divs with some text, but when the matter comes to create a textarea it just won't work. The element doesn't even show.

HTML:

<button class="btn bg-info" ng-click="insertReplyBox()">Reply</button>
<br>
<div class="row">
  <div class="col-lg-2" id="replyBox">
    <div ng-bind-html="replyBoxHTML"></div>
    <div ng-bind-html="replyBoxHTML1"></div>
  </div>
</div>

JS (angular controller)

app.controller('messagesReadController', function($scope) {
  $scope.insertReplyBox = function() {
    console.log("reply clicked");

    $scope.replyBoxHTML = '<div>This works!!</div>';
    $scope.replyBoxHTML1 = '<textarea col="4" row="20" placeholder="placeholder"></textarea>'; //this doesn't work
  }
});

(I have added the ngSanitize dependency in another file, so it doesn't show here.)


Solution

  • I think you are doing it the wrong way, with angularJS you should avoid a maximum to play with DOM like that (except for directives)

    What about this ?

    <button class="btn bg-info" ng-click="textareashow = !textareashow">Reply</button>
     <br>
     <div class="row" ng-show="textareashow">
       <div class="col-lg-2" id="replyBox">
         <textarea col="4" row="20" placeholder="placeholder"></textarea>
       </div>
     </div>