更改ng-model时，角度textarea换行不起作用

Question

我有一个文本区域使用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 />"也不起作用。实际上，即使在模型初始化期间它们也不起作用

Answer 1

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

的元素中

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;