javascript - AngularJS:数据格式化的推荐做法是什么？

Question

在 AngluarJS 应用程序中，我有一个数据填充表，我希望单元格不显示原始数据，而是显示它的格式化版本，实际上是一个网页链接，带有一个使用原始数据的 url。换句话说，类似于:

<td><a href="http//www.website.com/[RAW_DATA]">[RAW_DATA]</A></td>

我看到了 4 种方法来实现这一点:

• 1:使用类似这样的方式在模板中包含链接:

  <td><a href="http//www.website.com/{{raw_data}}">{{raw_data}}</A></td>
  

• 2:使用自定义指令，像这样:

  JS

  directive('custom_link', function() {
      return{
          restrict: 'E',
          template:'<a href="http//www.website.com/{{raw_data}}">{{raw_data}}</A>'
      }
  });
  

  HTML

  <td><custom_link /></td>
  

• 3:使用自定义过滤器，像这样:

  JS

  filter('custom_link', function() {
      return function(raw_data) {
          return "http//www.website.com/"+raw_data;
      };
    })
  

  HTML

  <td><a href="{{raw_data|custom_link}}">{{raw_data}}</A></td>
  

• 4:使用自定义指令和自定义过滤器，如下所示:

  JS

  directive('custom_link', function() {
      return{
          restrict: 'E',
          template:'<a href="{{raw_data|custom_link_filter}}">{{raw_data}}</A>'
      }
  });
  
  filter('custom_link_filter', function() {
      return function(raw_data) {
          return "http//www.website.com/"+raw_data;
      };
    })
  

  HTML

  <td><custom_link /></td>
  

哪个“解决方案”最“优雅”或“符合 AngularJS”？

谢谢

Answer 1

我总是尝试并遵守 KISS(保持简单) 原则，如果您不需要更复杂的解决方案并且更简单的解决方案提供了所需的功能，请使用它。

假设上述每个解决方案都有效，或者更确切地说，可以为您提供所需的结果。

1. 我更喜欢解决方案 1，因为它更易于阅读和理解。
2. 解决方案 2 与解决方案 1 的方法基本相同，但如果您需要在多个地方使用相同的功能，或者您希望将来有更多可扩展的功能，这将是一个更好的解决方案。 指令非常适合代码重用。
3. 我个人不会使用解决方案 3 和 4，因为它们比我认为您在问题中描述的内容更复杂。

但是，如果您需要更复杂的数据格式，那么过滤器将是正确的选择。所以基本上，它归结为您需要完成什么来确定正确的实现，但最简单的通常是最好的。