保留AngularJS中的换行符

Question

我正在开发一个使用AngularJS的应用程序.我的控制器看起来像这样:

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

我的观点如下:

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

呈现视图时,值$scope.lines将在单行上呈现,如下所示:

var x=1; var y=2;

但是,我想将其显示为:

var x=1;
var y=2;

我究竟做错了什么？我试着开关\n用<br />,但是,也不能工作.

Answer 1

到目前为止，唯一的方法是使用ng-bind-html( -unsafe) （检查你的角度版本，因为你可能需要使用$sce）将 HTML 绑定到元素，如下所示：

角度 1.0.X：

<code ng-bind-html-unsafe="lines"></code>

角度 1.2+：

<code ng-bind-html="lines"></code>

但它需要$sce：

$scope.lines = $sce.trustAsHtml('var x=1;<br />var y=2;');

当然，使用 HTML 换行符：<br />

这是一个工作示例： http: //jsfiddle.net/3fha088t/

此处的示例与片段相同：

<code ng-bind-html-unsafe="lines"></code>

<code ng-bind-html="lines"></code>

Angular 1.2 版本，使用 $sce：

$scope.lines = $sce.trustAsHtml('var x=1;<br />var y=2;');

function TodoCtrl($scope) {
  $scope.lines = 'var x=1;<br />var y=2;';
}