将公共代码添加到角度过滤器模块

时间:2014-02-07 04:17:18

标签: angularjs angularjs-filter

我需要为项目编写3个过滤器,所有3个过滤器都执行相同的操作,但使用与$ rootScope不同的数组(它们将数字状态转换为显示值)。

如何编写此代码一次并从所有3个过滤器中调用它并将该实例保留在myFilters模块中?

我没有看到我可以放置该代码的地方。如果我正在写一个服务,我会有一个块我可以把它放进去,但是使用过滤器,我没有那个共同点来编写代码。

现在我刚刚把它移到全局范围,但是我想把它移到过滤器模块中,所以我不必重复3次,或者将它存储在全局范围内。

angular.module('myFilters', [])
.filter('aStatus', function($rootScope) {
    return function(id, attr) {
        var objectArray = $rootScope.appConfig.aStatuses,
            index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
})
.filter('bStatus', function($rootScope) {
    return function(id, attr) {
        var objectArray = $rootScope.appConfig.aStatuses,
            index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
})
.filter('cStatus', function($rootScope) {
    return function(id, attr) {
        var objectArray = $rootScope.appConfig.cStatuses,
            index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
});

1 个答案:

答案 0 :(得分:1)

为什么不将通用功能提取到服务中,只需从预先绑定objectArray的过滤器中调用它?

angular.module('myFilters', [])
.factory("StatusFilter", function ($rootScope) {
    return function(objectArray, id, attr) {
        var index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
});
.filter('aStatus', function(StatusFilter, $rootScope) {
    return function(id, attr) {
        return StatusFilter($rootScope.appConfig.aStatuses, id, attr);
    };
})
.filter('bStatus', function(StatusFilter, $rootScope) {
    return function(id, attr) {
        return StatusFilter($rootScope.appConfig.bStatuses, id, attr);
    };
})
.filter('cStatus', function(StatusFilter, $rootScope) {
    return function(id, attr) {
        return StatusFilter($rootScope.appConfig.cStatuses, id, attr);
    };
})

或者,您可以将该功能提取到过滤器中:

angular.module('myFilters', [])
.filter("Status", function ($rootScope) {
    return function(objectArray, id, attr) {
        var index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
});
.filter('aStatus', function($filter, $rootScope) {
    return function(id, attr) {
        return $filter("Status")($rootScope.appConfig.aStatuses, id, attr);
    };
})
.filter('bStatus', function($filter, $rootScope) {
    return function(id, attr) {
        return $filter("Status")($rootScope.appConfig.bStatuses, id, attr);
    };
})
.filter('cStatus', function($filter, $rootScope) {
    return function(id, attr) {
        return $filter("Status")($rootScope.appConfig.cStatuses, id, attr);
    };
})