javascript - AngularJS过滤表: $http.获取

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 is not a function

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

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