javascript - Angular 过滤器|具有全局设置的格式(最佳实践)

Question

共享库中有简单的过滤器

.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;
        }
        ...
    };

哪种方式是最佳实践

• 保存用户设置

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

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

Answer 1

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

app.filter('userMinutes2hm', function($filter,$userSettings) {
return function(min) {

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

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

<小时/>

总结:最佳实践是使用具有全局设置的服务，而不是 Angular 外部的全局变量。服务是单例的，因此也可以存储/保存数据，如果您想永久存储数据，那么服务可以使用 localStorage 等。