AngularJS 使用自定义过滤器的 promise 和计时

Question

我现在对自定义过滤器计时感到非常头疼。 我有一个演示(学习 Angular)图库应用程序，其中我使用带有复选框的自定义过滤器来选择不同类别的照片。

Simptoms:在 ng-repeat 指令上使用自定义过滤器时，我注意到这个 http://screencast.com/t/xPGX1lyTu9Yp ...经过几个小时的调试，我得出的结论是，问题是当过滤器运行时，我的 JSON 中的数据不存在，尽管没有过滤器，一切似乎都加载正常。

这里有一个 plnkr http://plnkr.co/edit/KbBg67 (我复制粘贴了代码，稍微修改了一下，还没有工作，早上会修复它，但这就是代码)

我开始在我的服务中使用延迟和 promise 来获取 JSON 数据，这样我 Controller 和其他人就会等待数据加载，就像这样 [服务]

angular.module('services', []).factory('getAllPosts', ['$http', '$q', '$timeout',
function($http, $q, $timeout) {
  //defining the promised based API
  var deffered = $q.defer();
  //the getData function
  var getData = function() {
    //defining a empty data array
    var theData = {};
    //using $http to get the dat
    $http.get('/wordpress/api/get_recent_posts/').success(function(data) {
      // prepare data here
      //assigning our data to the theData array.
      // // New stuff here, we are pushing the data one by one to populate the array faster so it isn't emtpy .. ?!
      theData.length = 0;
      for (var i = 0; i < data.length; i++) {
        theData.push(data[i]);
      }
      theData = data;
    });
    //setting a timeout for the data and waiting if necesarry.
    $timeout(function() {
      deffered.resolve(theData);
    }, 1000);
    //when it s done, return the promise... i think so. ?!
    return deffered.promise;
  }
  return {
    //creating a getData handler to use in controllers.
    getData: getData
  };
}])

我的 Controller 是这样的[CONTROLLER]

.controller('ListController', ['$scope', 'getAllPosts', 'getCategories', '$location',
    function($scope, getAllPosts, getCategories) {
        $scope.name = 'list';
        getAllPosts.getData().then(function(data) {
            return $scope.posts = data.posts;
        });
        getCategories.get(function(data){
            return $scope.categories = data.categories;
        })
    }
])

我使用 getData().then() 在加载时获取它。

我意识到我没有告诉过滤器[FILTER]同样的事情

angular.module('filters', [])
.filter('checkboxFilter', function($filter) {
    return function(post, prefs) {
        var i, j, k, n, out, matchingpost = [];
        // loop through the post
        for (i = 0; i < post.length; i++) {
            console.log('I passed the length ... wtf?')
            out = false;
            n = 0;

            if (prefs) {
                // for each item, loop through the checkboxes categories
                for (j = 0; j < prefs.length; j++) {

                    // for each category, loop through the checkboxes categories of the current category
                    for (k = 0; k < prefs[j].categories.length; k++) {

                        // test if the current item property name is the same as the filter name
                        if (post[i][prefs[j].slug] === prefs[j].categories[k].slug) {

                            // test if checkbox is checked for this property 
                            (prefs[j].categories[k].value) ? n++ : out = true;
                            break;
                        }
                    }
                    if (out) break;
                    // if one filter in each categories is true, add item to the matchingpost
                    if (n === prefs.length) {
                        matchingpost.push(post[i]);
                    }
                }
            }
        }
        return matchingpost;
    }
})

问题是我开始读一本有 Angular 的书，我不明白很多事情，所以我去尝试实践，慢慢地每一点都到位，但是这本书......我已经花了很多时间在它。我想如果我再次接受它会更有意义。

<小时/>

问题:如何消除这些错误并使过滤器在加载数据后读取数据？

<小时/>

附带问题:通过不同的服务，我输出主干(Wordpress)中的所有现有类别，并在复选框中重复它们，我如何将复选框链接到此过滤器的结果？ (虽然我已经看过一些例子，但对我来说还不是很明显......)

<小时/>

附带问题 2:为什么我的所有请求都会成倍增加，正如我发布的第一个屏幕截图所示，等等，这就是我正在谈论的部分 http://screencast.com/t/lcrWnlioL3u ...到目前为止我只有 44 个帖子，但看起来即使在数据存在之后，过滤器也会再次调用它。

这种行为也发生在其他事情上......我想知道我做错了什么。

<小时/>

注释:我今晚使用的是 Angular 1.2.0rc1，所有行为都出现在我使用的其他版本中:1.0.7.0、1.1.5。

Answer 1

我认为真正的方法是重写默认的 $interpolateProvider 以启用返回 promise 的过滤器。这样，您可以推迟某些过滤表达式的渲染，直到它们得到解析。

但请记住，您不能轻松地对链式过滤器执行此操作。您可能还被迫重写 $parse 以启用对 Promise 链的支持。

我现在面临着同样的问题，因此，我可能会继续这样做。如果是这样，我将确保在我的项目的 github 存储库上发布答案的链接 ( http://github.com/agileapes/bootstrapui )。

编辑

另一种(大部分)简单的方法是将任意参数传递给通过 HTTP 调用(或任何其他方式)更新的过滤器:

.controller("MyController", function ($scope, $q, $timeout) {
    $scope.result = null;
    var deferred = $q.defer();
    $timeout(function () {
        $scope.result = [1, 2, 3, 4];
    }, 2000);
});

这里我刚刚通过超时更新了结果，但我不必这样做。这仅用于演示。您可以按照您选择的任何方式更新 $scope.result。

这是一个示例过滤器，结果中仅包含偶数个数字:

.filter('even', function () {
    return function (input) {
        if (!angular.isArray(input)) {
            return input;
        }
        var result = [];
        angular.forEach(input, function (x) {
            if (x % 2 == 0) {
                result.push(x);
            }
        });
        return result;
    }
});

现在，在我看来，我可以将它们一起使用，这样:

<div ng-controller="MyController">
    <ul ng-if="result.length"> <!-- It is nice to not pollute the DOM with empty lists -->
        <li ng-repeat="item in result | even">{{item}}</li>
    </ul>
</div>

大约几秒钟后，列表应该被填充，并且 ngRepeat 指令应该收到过滤结果。

这里的技巧是，我为该特定的 result 变量进行了摘要循环，这意味着输入该变量的过滤器也将被重新执行，这在转指一切都会顺利、如期进行。