使用AngularJS用户过滤器与Promise

14 浏览
0 Comments

使用AngularJS用户过滤器与Promise

我有一个用户过滤器。您可以看到下面的模拟示例（它返回相同的数据，即来自users_data_contents的数据，在实际中是函数调用）：

var appModule = angular.module('appModule', [])
    .filter('filter_ghosts', function($rootScope){
        return function(users_data_contents){ // 从视图获取数据
            return users_data_contents;
        };
    });

我需要以异步模式使用它，但不太明白如何做。我尝试了这样的代码：

var appModule = angular.module('appModule', [])
    .filter('filter_ghosts', function($rootScope){    
        function getPromised(){
            var cnt = 0, intrv = setInterval(function() {
                ++cnt;
                if (cnt>10) {
                    return function(users_data_contents){
                        clearInterval(intrv);
                        return users_data_contents;
                    }
                }
                if (cnt > 50) {
                    clearInterval(intrv);
                }
            }, 100);
        }
        getPromised.$stateful = true;
        return getPromised;
    });

但是这并不起作用。

应用了该过滤器的HTML代码如下：


    ....

有人可以帮忙吗？

更新

解决方案请参考这里：AngularJS : Asynchronously initialize filter

然而，事实证明更合适的方法不是使用过滤器，而是将重复器绑定到在相应过程中更改的数组上。

0

1 答案

0 Comments

在使用AngularJS用户过滤器时，可能会遇到使用Promise的问题。这个问题的出现是因为在$scope中创建一个空数组，并将ng-repeat绑定到该数组的过滤器上。然后，当异步操作完成时，只需将该数组填充到相应的值。

解决这个问题的方法是使用Promise。Promise是一种用于处理异步操作的特殊对象，可以将异步操作包装在其中，并在操作完成时返回结果。在这种情况下，我们可以使用Promise来处理异步操作，并在操作完成后填充数组。

首先，我们需要在控制器中注入$timeout服务。$timeout服务允许我们模拟一个异步操作。然后，我们将创建一个名为"users"的空数组，并将其绑定到ng-repeat指令的过滤器上。

接下来，我们将使用$timeout服务来模拟一个异步操作。在这个例子中，我们将使用$timeout延迟1秒钟来模拟异步操作的完成。在异步操作完成时，我们将使用resolve()方法返回一个包含用户数据的Promise对象。

最后，我们将在控制器中使用.then()方法来处理Promise对象的结果。当Promise对象被解决时，.then()方法将被调用，并将返回的用户数据填充到"users"数组中。

以下是完整的代码示例：

angular.module('myApp', [])
  .controller('myController', function($scope, $timeout) {
    $scope.users = [];
    // Simulating async operation
    $timeout(function() {
      // Simulating data retrieval
      var userData = [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Bob', age: 35 }
      ];
      // Resolving the Promise with user data
      return Promise.resolve(userData);
    }, 1000)
    .then(function(data) {
      // Filling the users array with data
      $scope.users = data;
    });
  });

通过使用Promise，我们可以在异步操作完成后正确地填充数组，并在视图中正确地显示过滤器的结果。这种方法可以解决在使用AngularJS用户过滤器时遇到的问题。

0