在带有AngularJS的HTML中添加换行符[重复]

Question

我正在尝试让 AngularJS 和/或 HTML 在 2 个单独的行上打印出以下内容：

FOO
BAR

但是，尽管我的换行符 \n，但我的以下 HTML 和 JS 仍显示在同一行。

HTML

<div ng-controller="MyCtrl">
  {{name}}!
</div>

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'FOO \n BAR';
}

这可能吗？

JSFiddle

Answer 1

在 HTML 中，所有换行符、制表符和空格都会被忽略。 如果要插入新行。改用<br/>

Answer 2

您可以简单地使用<br>：

JS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
   $scope.name = 'FOO <br> BAR';
}

HTML

<div ng-controller="MyCtrl">
  <span class="name" ng-bind-html-unsafe="name"></span>!
</div>

更多关于 ng-bind-html 指令的文档：https://docs.angularjs.org/api/ng/directive/ngBindHtml