javascript - 带有 $http 响应的 Angular 过滤器

Question

我需要一个过滤器，我需要在其中进行 $http 调用，然后返回该响应。我正在尝试使用 Angular promise ，但没有任何效果。返回是不等待响应的。看看下面我的代码。它正在返回 {} ，不等待 $http 响应。我只需要使用过滤器。想法是将其与 Controller 分开，以便以后可以在任何地方使用。

.filter('filterXML',['testOne','$sce',function(testOne, $sce){

    return function(url){

       return testOne.getTest(url).then(function(data){
         return data;
        });

    }

 }])


.factory('testOne',  ['$http', function($http){
   return {
   getTest: function(url){
    return $http.get(url).success(function(data){
      console.log(data)
      return data;
    })
  }
 }
}])

目标:{{ ' http://rss.cnn.com/rss/cnn_topstories.rss ' |过滤XML}}

因此它将返回此 rss feed 中的所有数据。

我不想使用 Controller 。想法是制作单独的模块并在应用程序中的任何位置调用它。

任何帮助将不胜感激。 谢谢

Answer 1

您不应该在过滤器中进行 http 调用，这不是过滤器的用途。过滤器通常会传递一个对象数组，并且只有通过特定条件的对象才会在新的过滤数组中返回。

我认为你想要一个更像这样的设置......

angular.module('foo', [])

.controller('someController', ['$scope', '$filter', 'testOne', function($scope, $filter, testOne){

    testOne.getTest('foo/bar').then(function(data){
      $scope.myFilteredData = $filter('filterXML')(data);
    });

}])


 .filter('filterXML', function() {
  return function(input) {
    // the condition on which to filter the input goes here...
    // this is just dummy code you will have to work out your own logic
    return (input === 'XML');
  };
});


.factory('testOne',  ['$http', function($http){
   return {
   getTest: function(url){
    return $http.get(url)
      .success(function(data){
        console.log(data)
        return data;
      });
  }
 }
}])