自定义html货币过滤器或指令

Custom html for currency -- filter or directive?

本文关键字:指令 过滤器 货币 html 自定义      更新时间:2023-09-26

我有一个UX设计,它显示货币符号为灰色,十进制值为黑色。为了实现这一点,我做了一些谷歌搜索,最终制作了一个简单的过滤器:

.filter('tnCurrency', ['$filter', function($filter) {
    return function(input, symbol, decimal) {
        var amt = $filter('currency')(input, '', decimal);
        return  '<span class="tn-currency-symbol">' + symbol + '</span><span class="tn-currency-amt">' + amt + '</span>';       
    };
}]);

用法:

<span ng-bind-html="total.amt | tnCurrency:'$':2"></span>
我已经考虑了一段时间了…这应该作为一个指令更好地实现还是我应该坚持过滤器?

指令更适合于操作DOM,而过滤器更适合于转换值。

我将创建一个使用货币过滤器的指令。

这里有一个关于何时使用指令和何时使用过滤器的好线程。