AngularJS 过滤表：$http.get

Question

我正在使用 AngularJS 设置一个表格并通过搜索或类别关键字过滤其数据。我

AngularJS

categorieFilter = angular.module("categorieFilter", [])
categorieFilter.controller("catFilter", ["$scope", "store", function($scope, store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    $scope.categories = store.getCategories();
    $scope.products = store.getProducts();

    $scope.filterProductsByCats = function(category){
    $scope.search = category;
    };
}])
categorieFilter.factory('store', function($http){
          return {
            getCategories: $http.get('api/categories').success(function (data) {
                return data;
            }),
            getProducts : $http.get('api/products').success(function (data) {
                return data;
            }
        };
    });  

$http.get 本身正在工作，当我直接浏览到我的 api 时，我得到了所需的数据。此外，当我在类别中的 $hhtp.get 之后执行警报（数据）时，我得到了我需要的数据......所以这应该有效，但它没有。我收到一个错误：

TypeError: store.getCategories 不是函数

我不知道这是从哪里来的。有人解决这个问题吗？

Answer 1

使用工厂时，您应该使用new 函数来返回构造函数：

function myFactoryFunction() {
    return function() {
        var a = 2;
        this.a2 = function() {
            return a*2;
        };
    };
}
---------------------------------------------------------------------------------
// Injected in your controller
var myShinyNewObject = new myInjectedFactory();
$scope.four = myShinyNewObject.a2();

From this detailed post angular.service vs angular.factory

你的情况

var storeFactory = new store();
storeFactory.getProducts();

更新版本，带有 TS 代码：

categorieFilter = angular.module("categorieFilter", [])
/**
Store factory
*/
categorieFilter.controller("catFilter", ["$scope", "store", function($scope, store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    store.getCategories().then(function(data){
        $scope.categories = data;
    })

    store.getProducts().then(function(data){
        $scope.products = data;
    })

    $scope.filterProductsByCats = function(category){
    $scope.search = category;
    };
}])



/**
Store factory
*/
categorieFilter.factory('store', function($http, $q){

    function _getCategory (){
        var deferred = $q.defer();

        $http.get('api/categories').success(function (data) {
                deferred.resolve(data);
            })

        return deferred.promise;
    }

    function _getProducts (){
        var deferred = $q.defer();

        $http.get('api/products').success(function (data) {
                        deferred.resolve(data);
                    }

        return deferred.promise;
    }


          return {
            getCategories: _getCategory,
            getProducts : _getProducts
        };
    });  

Answer 2

我通常使用 $resource 创建服务。你可以试试这个：

categorieFilter = angular.module("categorieFilter", []);

categorieFilter.factory('categoryStore', [
  '$resource',
  function($resource) {
    return $resource('/api/categories/', {}, {
      getCategories: { method: 'GET', params: {} },
    });
  }
]);

categorieFilter.factory('productsStore', [
  '$resource',
  function ($resource) {
    return $resource('/api/products/', {}, {
      getProducts: { method: 'GET', params: {} },
    });
  }
]);

categorieFilter.controller("catFilter", [
  "$scope", "categoryStore", "productsStore", function ($scope, categoryStore, productsStore) {
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    $scope.categories = categoryStore.getCategories();
    $scope.products = productsStore.getProducts();
    $scope.filterProductsByCats = function(category) {
      $scope.search = category;
    };
  }
]);

Answer 3

我通常编写传递回调函数参数的 http 工厂（我通常使用 Node，并且习惯于为长时间工作的函数执行此操作）。获取您的代码，它看起来像这样：

categorieFilter = angular.module("categorieFilter", [])
categorieFilter.controller("catFilter", ["$scope", "store", function($scope, store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    store.getCategories(function(err, data){
      if(!err)
        $scope.categories = data;
    });
    store.getProducts(function(err, data){
      if(!err)
        $scope.products = data;
    });

    $scope.filterProductsByCats = function(category){
    $scope.search = category;
    };
}])
categorieFilter.factory('store', function($http){
          return {
            getCategories: function(next){
              $http.get('api/categories')
              .success(function (data) {
                next(null, data);
              })
              .error(function(headers, status){
                next(status, null);
              });
            },
            getProducts : function(next){
             $http.get('api/products')              
             .success(function (data) {
                next(null, data);
              })
              .error(function(headers, status){
                next(status, null);
              });

            }
        };
    });  

正如您现在所看到的，工厂接受一个回调，该回调将使用错误和数据参数调用，因此错误处理可以委托或不委托给控制器。这对于复杂的情况非常有用。

Answer 4

这是一个plunker，它使用 $q 并使用一些随机 JSON 显式延迟。

var app = angular.module('categorieFilter', []);

app.factory('store', function($http, $q){

  return {
    getCategories: function() {
      var deferred = $q.defer();
        $http.get('https://api.myjson.com/bins/2gamd')
          .success(deferred.resolve)
          .error(deferred.resolve);
        return deferred.promise;
    }
  }

})

.controller('catFilter', function($scope, store){

    store.getCategories().then(function(data) {
      $scope.categories = data.stories;// change data.stories to whatever your data is
    });

});