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进行警报（数据）ifter时，我得到了我需要的数据......所以这应该可行，但它不会。我收到一个错误：

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
    });

});

AngularJS过滤表：$ http.get

4 个答案: