Question

在AngluarJS应用程序中，我有一个数据填充表，并希望单元格不显示原始数据，而是显示其格式化版本，实际上是指向网页的链接，其中包含使用原始数据的网址。换句话说，比如：

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

哪个＆＃34;解决方案＆＃34;是＃34;优雅＆＃34;，或＆＃34;符合AngularJS＆＃34;？

由于

Answer 1

我总是尝试订阅 KISS（保持简单）原则，如果您不需要更多的计算解决方案，而更简单的解决方案提供所需的功能，请使用它。

鉴于上述每种解决方案都能起作用，或者更确切地说是为您提供所需的结果。

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

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

Answer 2

1,2使用指令创建可重用 HTML组件。总是。如果重用不是此用例的目标，那么请尝试将其保持为simle（KISS）
3,4,5他们都工作但确保你获得的东西增加了复杂性。增加复杂性没有额外的优势是不值得的麻烦。

AngularJS：数据格式化的推荐做法是什么？

2 个答案: