Question

我需要以“line1 \ nline2”格式显示我无法访问的服务器返回的字符串。事情是使用ngModel将该字符串绑定到textarea使其显示为字面line1\nline2而不是

line1
line2

尝试过ngBind也没办法。

textarea是这样的：

<textarea placeholder="some-placeholder" id="some-id" type="text" rows="4" cols="48" ng-model="backendResponse.key" style="resize: none;"></textarea>

我意识到这个问题可能已经得到了回答，但谷歌没有认识到“\ n”作为搜索的一部分会让搜索变得更加困难所以如果情况确实如此，我会依照你原谅我。

更新
我通过运行来实现它 backendResponse.key = backendResponse.key.replace(/\\n/g, '\n');
有人知道为什么会这样吗？

Answer 1

您可以创建一个自定义指令，用<br />标记替换换行符。

要使用它，请在控制器中初始化模型：

app.controller('ctrl', function($scope) {
    $scope.model = 'hello\nthere';
});

将模型传递给display指令：

<div ng-controller="ctrl">
    <display model="model"></display>
</div>

完整代码

var app = angular.module('app', []);

app.directive('display', function() {
  return {
    restrict: 'E',
    scope: {
      model: '='
    },
    link: function(scope, element, attr) {
      scope.$watch('model', function(newVal) {
        if (newVal) {
          var model = newVal.replace(/\n/g, '<br />');
          element.html(model);
        }
      });
    }

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>

<body ng-app="app">
  <div ng-init="model='hello\nthere'">
    <textarea ng-model="model"></textarea>
    <br />
    <display model="model"></display>
  </div>
</body>

使用ngModel作为绑定时，在textarea中加载的文本中的行跳转会丢失

1 个答案: