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 div
s 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.)
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>