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绑定到元素，像这样：

Angular 1.0.X：

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

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

此处与代码段相同：

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
      <p>Working version: </p>
        <code ng-bind-html-unsafe="lines"></code>
      <p>Original version: </p>
      <code>{{lines}}</code>
  </div>
</div>

Angular 1.2版本，使用$ sce：

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
      <p>Working version: </p>
        <code ng-bind-html="lines"></code>
      <p>Original version: </p>
      <code>{{lines}}</code>
  </div>
</div>

Answer 2

你的$ scope.lines被替换为普通字符串。你应该把它绑定为html而不是。

请参阅此How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

保留AngularJS中的换行符

2 个答案:

Angular 1.0.X：

Angular 1.2 +：