我正在开发一个使用 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 with <br />然而，这也不起作用。
到目前为止，唯一的方法是使用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/ 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
