将 textarea 内容绑定到 md-card 时保留换行符

Question

我有一个 textarea 和一个 md-card。

angular.module('dashboard', ['ngMaterial'])
  .config(function($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .dark()
      .primaryPalette('indigo')
      .accentPalette('yellow');
  })
  .controller('previewCtrl', function() {
    //previewCtrl = this;
    this.previewData = previewData;
  });

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<div ng-app="dashboard">
  <textarea required type="text" rows="5" ng-model="form.text"></textarea>

  <md-card class="md-whiteframe-9dp card-noimage">
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">Title</span>
        <span class="md-subhead">Sub heading</span>
      </md-card-title-text>
    </md-card-title>
    <md-card-content ng-bind="form.text">
    </md-card-content>
  </md-card>
</div>

我正在尝试将在 textarea 中输入的文本放入 md-card 的内容区域。

问题 - 每当我在文本区域中键入 <br> 或 \n 时，卡片都会显示“
”和“\n”，而不是显示换行符。我想显示换行符而不是它们

Answer 1

要通过 AngularJS 注入 HTML，您可以使用 ng-bind-html 指令而不是 ng-bind。

它需要你将ngSanitize 模块注入你的应用程序并首先导入它的JS文件

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-sanitize.min.js"></script>

这样，文本被理解为html。因此，<br> 标记将呈现为新行。

但是\n 不是 HTML，因此您可以创建一个过滤器来将其替换为 <br> 标记，如下所示：

app.filter('newLines', function () {
    return function(text) {
        if(text)
            return text.replace(/\\n/g, '<br/>');
    };
});

现在您可以像这样使用ng-bind-html 指令和newLines 过滤器：

<md-card-content ng-bind-html="form.text | newLines">
</md-card-content>

---

这是应用上述修改后的代码：

angular.module('dashboard', ['ngMaterial', 'ngSanitize'])
  .config(function($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .dark()
      .primaryPalette('indigo')
      .accentPalette('yellow');
  })
  .controller('previewCtrl', function() {
    //previewCtrl = this;
    this.previewData = previewData;
  })
  .filter('newLines', function () {
      return function(text) {
          if(text)
              return text.replace(/\\n/g, '<br/>');
      };
  });

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-sanitize.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<div ng-app="dashboard">
  <textarea required type="text" rows="5" ng-model="form.text"></textarea>

  <md-card class="md-whiteframe-9dp card-noimage">
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">Title</span>
        <span class="md-subhead">Sub heading</span>
      </md-card-title-text>
    </md-card-title>
    <md-card-content ng-bind-html="form.text | newLines">
    </md-card-content>
  </md-card>
</div>