在范围更改时重新运行角度滤波器

Re run angular filter on scope change

本文关键字：滤波器 重新运行 范围      更新时间：2023-09-26

我正在构建的应用程序为用户提供了一个选项，可以更改公里和英里之间的单位距离。

我构建了一个小过滤器来转换这些距离：

app.filter('distance', function() {
    return function(input, scope) {
        var distanceName = (scope.units.distance === 'km') ? 'km' : 'ml';
        // scope.units.value is 1000 by default and 621 if miles are selected.
        return (input / scope.units.value).toFixed(2) + distanceName;
    };
});

在我的模板中，我只是这样使用它：

{{ point.distance | distance }}

问题是当$scope.units.value更改过滤器时不更新值时，我应该以某种方式重新运行过滤器......即使我希望它是由 Angular 完成的，但它没有。

当值更改时，摘要将启动，因此如果我用$scope.$apply()强制它，它会触发错误。

我

该如何解决它，我缺少什么才能工作？

筛选器的第二个（以及后续）输入参数是使用冒号:运算符指定的。现在，您没有为筛选器指定第二个参数。

points.distance是输入参数，冒号后指定的参数是其余可能的参数。

因此，在您的情况下，units.distance映射到过滤器上的scope，这是一个令人困惑的名称，请考虑将其更改为measurement或类似的东西

为了使您的过滤器正常工作，您还需要 units.value .向筛选器return function(input, measurement, value) ...添加一个附加参数并像这样使用它

{{ point.distance | distance:units.distance:units.value }}

编辑：就像@charlietfl提到的，一个更简单的解决方案可能是：

return function(input, measurementConfig) ...

用法：

{{ point.distance | distance:units }}

相关文章：