具有承诺的角度过滤服务

Question

我有以下过滤器：

    app.filter("findDivision", function(divisionService) {

    var isWaiting = false;
    var returnValue = null;

    function myFilter(input) {

        var translationValue = "Loading...";
        if(returnValue)
        {
            translationValue = returnValue;
        } else {
            if(isWaiting === false) {
                isWaiting = true;
                divisionService.getDivisionById(input).then(function(data) {
                    console.log("GetTranslation done");
                    returnValue = data[0].name;
                    isWaiting = false;
                });
            }
        }

        return translationValue;
    }

    return myFilter;
});

我在divisionService中调用的函数如下所示：

 getDivisionById: function (id) {
    var d = $q.defer();
    $http({
        url: api.getUrl2('division'),
        method: "GET",
        params: {filters: {id: {EQUAL: id}}}
    }).success(function (data, status, headers, config) {
        d.resolve(data);
    }).error(function (data, status, headers, config) {
        api.handleError(data);
        console.log(data);
        d.reject(data);
    });
    return d.promise
}

可悲的是，这个输出看起来像这样：

谁能告诉我为什么会这样？以及我如何获得正确的价值？

Answer 1

在第一次调用过滤器时，承诺可能尚未解决，因为HTTP调用需要一段时间才能完成。您的过滤器代码将立即跳转到return语句return translationValue;。在这种情况下，过滤器返回“正在加载...”。

不幸的是，过滤器在下一个摘要周期之前不会自动重新评估过滤器。 Angular无法知道它应该执行另一个摘要周期，因为没有任何更改（没有用户交互或更改$ scope）。作为实验，尝试通过更改模型来手动触发摘要周期，例如使用input框ng-model。此时，您将看到过滤器将重新评估并显示输出。