Javascript 在AngularJS中保留换行符

我正在开发一个使用AngularJS的应用程序。我的控制器如下所示：

function TestCtrl($scope) {
  $scope.lines = 'var x=1;\nvar y=2;';
}

<div ng-controller="TestCtrl">
  <p>
    Output:<br />
    <code>{{lines}}</code>
  </p>
</div>

var x=1; var y=2;

我的观点是这样的：

function TestCtrl($scope) {
  $scope.lines = 'var x=1;\nvar y=2;';
}

<div ng-controller="TestCtrl">
  <p>
    Output:<br />
    <code>{{lines}}</code>
  </p>
</div>

var x=1; var y=2;

呈现视图时，

$scope.lines

中的值呈现在一行上，如下所示：

function TestCtrl($scope) {
  $scope.lines = 'var x=1;\nvar y=2;';
}

<div ng-controller="TestCtrl">
  <p>
    Output:<br />
    <code>{{lines}}</code>
  </p>
</div>

var x=1; var y=2;

但是，我想将其显示为：

var x=1;
var y=2;

---

我做错了什么？我尝试用

切换

\n

，但是，这也不起作用。

到目前为止，唯一的方法是使用

ng bind html

（

-safe

）（检查您的角度版本，因为您可能需要使用

$sce

）将html绑定到元素，如下：

---

角度1.0.X：

---

当然，使用HTML换行符：

以下是一个工作示例：

此处的示例与代码片段相同：

函数TodoCtrl（$scope）{ $scope.lines='var x=1；
var y=2；'； }

工作版本：

原文：

{{lines}}

---

您的$scope.line将替换为普通字符串。您应该将其绑定为html

---

参见此

代码标记是否作为预标记工作<代码>空白：预处理？根据此处删除的答案，如果您在原始问题中使用/n，则@JimmyRare在css中添加“空白：pre；”的解决方案可能会解决此问题this@BenTaliadoros是的，但是坚持一种换行方式通常是个好主意。由于OP已经在他看来使用了

（而不是

内容

），他可能应该坚持使用HTML换行符。