从AngularJS过滤器中的异步回调返回数据答案

【问题标题】：Return data from Asynchronous callback in AngularJS filter从AngularJS过滤器中的异步回调返回数据
【发布时间】：2016-08-03 04:02:59
【问题描述】：

场景是我在我的应用程序中使用了一个简单的过滤器来裁剪这样的图像 - HTML -

<img ng-if="item.data.topImage" ng-src="{{item.data.topImage | cropImage:240:135}}">

原始过滤器 -

.filter('cropImage', [function () {
        return function (url, width, height, noDefault) {
            return cropImage(url, {
                width: width,
                height: height
            });
        };
    }])

这个cropImage 是一个简单的函数。现在我想调用一个使用异步回调的函数。现在更新后的过滤器是这样的——

更新过滤器 -

.filter('cropImage', [function ($q) {
        return function (url, width, height, noDefault) {
                    var defered = $q.defer();
            buildfire.imageLib.local.cropImage(url, {
                width: width,
                height: height
            }, function (e, d) {
                if (e)
                    defered.reject('');
                else {
                    defered.resolve(d);
                }
            });
            return defered.promise;
        };
    }])

但正如预期的那样，这失败了。

在这种情况下我该怎么办。我知道我可以使用指令，但这个过滤器在我的应用程序中使用。除了 $timeout 我还能做什么？

【问题讨论】：

标签： angularjs asynchronous angularjs-filter

【解决方案1】：

由于您正在使用 img 元素并希望在尚未创建图像 url 之前阻止请求，因此您应该真正研究执行所有这些操作的指令，因为我认为这是最好的方法。

如果过滤器是你想要的，你需要查看$stateful过滤器，这将允许我们返回一个初始值，直到我们完成异步操作，然后用最终值更新，因为在v1.3x之后如果您返回初始值并且在值更改之前不会调用过滤器。

详细解释可以看这个similar answer。

【讨论】：