AngularJS

Question

我是 AngularJS 新手，正在尝试在 button 单击时动态创建 textarea。我正在使用 ngSanitize 插件，代码有效，我可以插入带有一些文本的普通 divs，但是当涉及到创建 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（angular 控制器）

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依赖，所以这里没有显示。）

Answer 1

我认为你做错了，使用 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>

Answer 2

使用不安全

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>

AngularJS - 使用 ngSanitize 动态创建的 <textarea> 不显示（其他元素显示）

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

javascript

ngsanitize