Question

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

＆＃13;

def get_object(self):
    username = self.kwargs.get('username')
    slug = self.kwargs.get('slug')

    # find the user
    user = User.objects.get(username=username)

    return Example.objects.get(user=user.id, slug=slug)

＆＃13;

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

＆＃13;

我正在尝试将textarea中输入的文字输入<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/angular_material/1.1.0/angular-material.min.js"></script>  <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>时，卡片会显示＆＃34;
＆＃34;和＆＃34; \ n＆＃34;而不是显示换行符。我想显示换行符而不是它们

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>

在应用上述修改后，您的代码在这里：

＆＃13;

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/>');
      };
  });

＆＃13;

<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>

＆＃13;

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

1 个答案: