Question

我正在构建的应用程序可以让用户更改千米和英里之间的单位距离。

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

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()强制它，则会触发错误。

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

Answer 1

使用冒号:运算符指定过滤器的第二个（及后续）输入参数。现在你没有为过滤器指定第二个参数。

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

在范围更改

1 个答案: