为什么这个Angular JS过滤器会删除空格？

Question

我正在制作一个小应用程序来学习Angular,并为文本处理制作了一个自定义过滤器.一切都运行正常,除非在我的输出文本有多个空格的情况下,这些会自动缩减为单个空格,这是我不想要的.问题不在我定义的函数中,因为我正在记录输出,这没有问题.

HTML:

<textarea name="textarea" rows="10" cols="50" ng-model="encodeText" placeholder="Type or paste in a message to encode." ></textarea>
<p>Filtered input: {{ encodeText | encode }}</p>

JS:

(function(){
  var app = angular.module('myApp', []);
  app.filter("encode", function() {
    return function(input) {
      if (input) {
        //text processing
        console.log(output);
        return output;
      }
    };
 });

这是一个莫尔斯电码练习.所以控制台日志输出是:

.- -... -.-.   -.. . ..-. 

有两个空格.在页面上我看到:

Filtered input: .- -... -.-. -.. . ..-.

我从Googling看到的唯一建议就是在textarea上使用ng-trim ="false",这没有任何效果.看起来修剪正在过滤器本身内发生.造成这种情况的原因是什么以及如何禁用它？ 代码回购

Answer 1

默认情况下,HTML不保留多个空格(将它们折叠为1个空格).向<p>标记添加样式以保留空格 ...

<p style="white-space: pre">Filtered input: {{ encodeText | encode }}</p>