AngularJS:数据格式化的推荐做法是什么?

AngularJS: what are the recommended practices for data formatting?

本文关键字：是什么 数据 数据格式 格式化 AngularJS      更新时间：2023-09-26

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

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

我看到了实现这一目标的四种方法:

  • 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"的?

谢谢

我总是尝试并订阅KISS(保持简单)原则，如果您不需要更完整的解决方案，而更简单的解决方案提供所需的功能，请使用它。

假设以上每个解决方案都有效，或者更确切地说，给你所需的结果。

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

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

    使用一个指令创建可重用的 HTML组件。总是这样。如果重用不是这个用例的目标，那么请尽量保持简单(KISS)
  • 3,4,5它们都有效，但要确保你在增加复杂性的同时获得了一些东西。增加的复杂性没有增加的优势只是不值得麻烦。
相关文章：