AngularJS - Динамически созданный <textarea> с использованием ngSanitize не отображается (другие элементы отображают)

Я AngularJS новичок и пытается динамически создать textarea на button нажмите кнопку. Я использую ngSanitize аддон, код работает, я могу вставить обычный divс текстом, но когда дело доходит до создания textarea это просто не сработает. Элемент даже не показывает.

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 (угловой контроллер)

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
  }
});

(Я добавил ngSanitize зависимость в другом файле, поэтому он не отображается здесь.)

Источник

2 ответа

Решение

Я думаю, что вы делаете это неправильно, с angularJS вы должны избегать максимум, чтобы играть с DOM, как это (за исключением директив)

Как насчет этого?

<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>
Источник

Использовать небезопасно

var app = angular.module('myApp', []);
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
  }
});

 app.filter('unsafe', function ($sce) {
    return function (val) {
       return $sce.trustAsHtml(val);
    };
 });
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="messagesReadController">

<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| unsafe"   ></div>
  </div>
</div>

 

</body>
</html>

Источник
Другие вопросы по тегам