Angular过滤器|全局设置格式化(最佳实践)

Angular filter|formating with global settings (best practics)

本文关键字：最佳 格式化 过滤器 全局设置 Angular      更新时间：2023-09-26

共享库中有简单的过滤器

.filter('minutes2hm', function () {
    return function (min, apply) {
        if (apply === false) {
            return min;
        }
        var h = Math.floor(min / 60).toString();
        min = (min - (h * 60)).toString();
        return '' + '00'.substring(0, 2 - h.length) + h + ':' + '00'.substring(0, 2 - min.length) + min;
    };
html

和

<th>{{minutes-125 | minutes2hm: false}}</th> --> 125
<th>{{minutes-125 | minutes2hm: true}}</th> --> 02:05

我想把true|false移到用户设置

<th>{{minutes-125 | minutes2hm}}</th>

.filter('minutes2hm', function () {
    return function (min) {
        if (USERSettings.apply === false) {
            return min;
        }
        ...
    };

哪种方式是

的最佳实践

  • 保存用户设置

  • 在过滤器中使用用户设置

允许在结果中共享项目之间的过滤器代码?

如果共享过滤器在不同的地方使用，那么首先用不同的名称创建第二个自定义过滤器，然后从服务中获取用户设置(过滤器可以使用依赖注入)，最后一个-通过$filter服务调用自定义过滤器中的"old"过滤器，示例用法:

app.filter('userMinutes2hm', function($filter,$userSettings) {
return function(min) {
    return $filter('minutes2hm')(min,$userSettings.apply); //use filter in filter with param from service
}
});

p。我看到你有全局变量USERSettings，这是错误的做法，为用户设置创建一些服务($userSettings)，就像我上面显示的。

总结:最佳实践是在angular外部使用带有全局设置的service，而不是全局变量。服务是单例的，所以也可以存储/保存数据，如果你想永久存储数据，那么服务可以使用localStorage。

为什么使用下面的代码?下面的代码有什么用?

if (apply === false) { //and if (USERSettings.apply === false)
            return min;
        }

如果您不使用过滤器，那么不要调用<th>上的过滤器。为什么需要通过true|False

如果你删除了这些代码，那么你的<th>和结果应该是这样的

<th>{{minutes-125 </th> --> 125
<th>{{minutes-125 | minutes2hm}}</th> --> 02:05

和过滤器代码看起来像

.filter('minutes2hm', function () {
    return function (min) {
               var h = Math.floor(min / 60).toString();
        min = (min - (h * 60)).toString();
        return '' + '00'.substring(0, 2 - h.length) + h + ':' + '00'.substring(0, 2 - min.length) + min;
    };
相关文章：