将textarea内容绑定到md-card时保留换行的实现问题

嘿，我明白你的困扰——输入的换行或者<br>标签在md-card里只显示成字符，没法正确换行对吧？这是因为ng-bind会把所有内容当成纯文本渲染，不会解析HTML标签或者换行符。下面给你两种实用的解决方案，按需选择就行：

方案一：用CSS直接处理换行符（最简单，纯文本场景首选） #

如果你的需求只是让textarea里的换行（\n）在md-card里显示成实际换行，不需要支持HTML标签的话，用CSS就能轻松搞定：

1. 给md-card-content添加一个自定义CSS类：

.card-content-wrap {
  /* pre-line会把\n解析成换行，同时合并连续空格，符合正常文本排版 */
  white-space: pre-line;
  /* 如果需要保留所有空格和换行，换成white-space: pre-wrap; */
}

2. 修改模板里的md-card-content，加上这个类：

<md-card-content class="card-content-wrap" ng-bind="form.text">
</md-card-content>

这样一来，你在textarea里敲回车的换行，就能直接在md-card里显示出来啦～

方案二：解析HTML标签（支持
和换行，需注意安全） #

如果你需要支持用户输入<br>标签，或者想把换行自动转成<br>，那就要用ng-bind-html配合$sce来处理：

1. 先修改controller，注入$sce并添加处理文本的方法：

angular.module('dashboard', ['ngMaterial'])
 .config(function($mdThemingProvider) {
 $mdThemingProvider.theme('default')
 .dark()
 .primaryPalette('indigo')
 .accentPalette('yellow');
 })
 .controller('previewCtrl', function($sce) {
  // 处理文本：转义危险HTML，把换行转成<br>，然后信任安全的HTML内容
  this.getRenderedText = function(text) {
    if (!text) return '';
    // 先转义特殊字符，避免XSS风险
    var safeText = text.replace(/&/g, '&amp;')
                       .replace(/</g, '&lt;')
                       .replace(/>/g, '&gt;');
    // 把换行符转成<br>标签
    var htmlText = safeText.replace(/\n/g, '<br>');
    // 告诉Angular这个HTML是安全的，可以渲染
    return $sce.trustAsHtml(htmlText);
  };
 });

2. 修改模板，绑定controller并使用ng-bind-html：

<div ng-app="dashboard" ng-controller="previewCtrl as previewCtrl">
 <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="previewCtrl.getRenderedText(form.text)">
 </md-card-content>
 </md-card>
</div>

⚠️ 注意：这个方案会解析HTML标签，所以一定要先转义特殊字符，避免XSS攻击哦～

额外提醒 #

原来的代码里没有绑定controller到模板上，记得加上ng-controller="previewCtrl as previewCtrl"，不然controller里的方法没法调用哒～

内容的提问来源于stack exchange，提问作者notnavindu