Question

场景是我在我的应用程序中使用一个简单的过滤器来裁剪这样的图像 - 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，我还能做什么？

Answer 1

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

如果你想要过滤器，你需要查看$stateful过滤器，这将允许我们返回一个初始值，直到我们完成异步操作，然后用最终值更新，因为在{{ 1}}如果返回初始值并且直到值发生变化，则不会调用过滤器。

有关详细说明，您可以查看此similar answer。

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

1 个答案: