更改 ng-model 时，Angular textarea 换行符不起作用答案

【问题标题】：Angular textarea newline not working when ng-model is changed更改 ng-model 时，Angular textarea 换行符不起作用
【发布时间】：2015-03-20 17:51:49
【问题描述】：

我有一个文本区域使用 ngModel 绑定到控制器中的一个变量。问题是只有初始化值以正确的新行格式显示在 textarea 中。当我更改具有 \n 的模型的值时，它会显示文本 \n 而不是预期的新行。有没有人遇到过这个？我正在使用 Angular 1.2.28

控制器

ctrlFunction = function () {
return {
    restrict: 'AE',
    templateUrl: 'my/view/path.html',
    link: function (scope, element, attrs) {

        scope.text = '\nLOOP 100\n  WAIT 5\n  input hello\n  if 1\n    message\n  endif\nENDLOOP\nHANGUP\n\n\n\u0000';

        scope.changeText= function(){
                 scope.text='\nLOOP 100\n  WAIT 5\n  input hello\n  if 1\n    message\n  endif\nENDLOOP\nHANGUP\n\n\n\u0000';
            }
        }
    }
}

查看

  <textarea class="form-control" ng-model="text"></textarea>
  <button ng-click="changeText()"></button>

点击按钮之前

之后

编辑：

我忘了提到"&#13;" or "<br />" 也不起作用。事实上，即使在模型初始化期间它们也不起作用

【问题讨论】：

如果使用 ascii 码 13 而不是 \n 会怎样？
相同，而不是 \n 它显示 @user1697575
将\n 替换为<br/>。或者 <pre>{{ text }}</pre> 在那个地方
@latheefitzmeontv itzmeontv : 请注意，使用 ng-model 无法将 html 值分配给文本区域
哦，那我想ng-bind，这里可能ng-bind-html可以用吗？

标签： angularjs textarea

【解决方案1】：

我无法重现您的问题，但如果您尝试将带有 \n 字符的文本显示为换行符，您可以将表达式放入带有 style="white-space: pre;" 的元素中

var app = angular.module('app', []);

app.directive('myTextArea', function() {
  var startingText = "Starting text";
  return {
    restrict: 'AE',
    template: '<textarea class="form-control" ng-model="text"></textarea><div style="white-space: pre;">{{ text }}</div><div><button ng-click="changeText()">change</button></div>',
    link: function(scope, element, attrs) {
      scope.text = startingText;
      scope.changeText = function() {
        scope.text = '\nLOOP 100\n  WAIT 5\n  input hello\n  if 1\n    message\n  endif\nENDLOOP\nHANGUP\n\n\n\u0000';
      }
    }
  };
});

textarea.form-control {
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>

<div ng-app='app'>
  <my-text-area></my-text-area>
</div>

【讨论】：