使用/ AngularJS在HTML中添加新行

Question

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

FOO
BAR

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

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