Question

我正在与我在AngularJS制作的网上商店挣扎。我试图将产品保存到数据库中，但是当我尝试调用某个函数时出现问题。我收到此错误：

TypeError: undefined is not a function
at l.$scope.createProduct (http://localhost:3000/controllers/product.Controller.js:30:20)
at hb.functionCall (http://localhost:3000/node_modules/angular/angular.min.js:198:426)
at Cc.(anonymous function).compile.d.on.f (http://localhost:3000/node_modules/angular/angular.min.js:215:74)
at l.$get.l.$eval (http://localhost:3000/node_modules/angular/angular.min.js:126:193)
at l.$get.l.$apply (http://localhost:3000/node_modules/angular/angular.min.js:126:419)
at HTMLFormElement.<anonymous> (http://localhost:3000/node_modules/angular/angular.min.js:215:126)
at HTMLFormElement.c (http://localhost:3000/node_modules/angular/angular.min.js:32:363)

我不明白为什么会这样，所以我希望有人可以帮助我。这是我的HTML代码

<form ng-submit="createProduct()">
            <div class="form-group">
                <label for="id">ID</label>
                <input type="text" ng-model="id" class="form-control" id="id" name="id" placeholder="Indtast det tilhørende ID">
            </div>
            <div class="form-group">
                <label for="brand">Brand</label>
                <input type="text" ng-model="brand" class="form-control" id="brand" name="brand" placeholder="Indtast brand">
            </div>
            <div class="form-group">
                <label for="content">Indhold</label>
                <input type="text" ng-model="content" class="form-control" id="content" name="content" placeholder="Indtast indhold">
            </div>
            <div class="form-group">
                <label for="alcohol">Procent</label>
                <input type="text" ng-model="alcohol" class="form-control" id="alcohol" name="alcohol" placeholder="Indtast antal procent">
            </div>
            <div class="form-group">
                <label for="price">Pris</label>
                <input type="text" ng-model="price" class="form-control" id="price" name="price" placeholder="Indtast prisen">
            </div>
            <div class="form-group">
                <label for="category">Kategori</label>
                <input type="text" ng-model="category" class="form-control" id="category" name="category" placeholder="Indtast kategori">
            </div>

<button type="submit" class="btn btn-primary">Opret produkt</button>
        </form>

除了我的HTML，我还有一个product.Controller和products.service。 productController看起来像这样：

(function(){

    function productController($scope, productsService, cartService, $routeParams){

        var modelProduct = function(productArray){
            $scope.product = productArray[0];
        }

        productsService.getProduct($routeParams.id)
            .then(modelProduct);

        $scope.addToCart = function(product, amount){
            cartService.addToCart(product, amount);
        }



        $scope.createProduct = function() {
            var product = {
                id          :   this.id,
                brand       :   this.brand,
                content     :   this.content,
                alcohol     :   this.alcohol,
                price       :   this.price,
                category    :   this.category
            }

            console.log(product);

            productsService.saveProduct(product);

        }
    }

    angular
        .module("Main.product", [])
        .controller("productController", productController);
})();

和我的productsService看起来像这样：

(function(){
    "use strict";

    var productsService = function($http){

        var categoriesSelected = new Array();
        var products = new Array();

        var getProducts = function(){

            /* Hent fra den lokale grillbar
            return $http.get("./data/products.json")
                    .then(function(response){
                        console.log(response.data);
                            return response.data;
                        }, getError);

            /* Hent fra databasen */

            return $http.get("api/products")
                    .then(function(response){
                        console.log(response.data);
                            return response.data;
                        }, getError);
        };

        var setProducts = function(data) {
            products = data;
        } 

        var getProduct = function(id) {
            return $http.get("api/product/" + id)
                    .then(function(response) {
                        return response.data;
                    })
        }


        var saveProduct = function(product){
            console.log(product);
            return $http.post("api/product", product)
                        .then(function(response){
                            return response.data;
                        })
        }


        var getCategories = function(response){
            return $http.get("./data/categories.json")
                    .then(function(response){
                        return response.data;
                    }, getError)
        };

        var getCategoriesSelected = function(){
            return categoriesSelected;
        }

        var productFilter = function(product){
            if(categoriesSelected.length > 0){
                if(categoriesSelected.indexOf(product.category) < 0){
                    return;
                }
            }
            return product;
        }

        var getError = function(reason){
            console.log(reason);
        }

        var findProductInArray = function(data, prodId){
            return data.filter(function(elem){
                if(elem.prodId === prodId){
                    return elem;
                }
            });
        }

        var categoryChange = function(category){
            var i = categoriesSelected.indexOf(category);
            if (i > -1) {
                categoriesSelected.splice(i, 1);
            } 
            else {
                categoriesSelected.push(category);
            }
        }

        var categoryFilter = function(product) {

            console.log("aks");
            if($scope.categoriesSelected.length > 0) {
                if($scope.categoriesSelected.indexOf(product.category) < 0) {
                    return;
                }
            }
            return product;
        }

        return{
            getProducts: getProducts,
            getProduct: getProduct,
            getCategories: getCategories,
            getCategoriesSelected: getCategoriesSelected,
            productFilter: productFilter,
            categoryChange: categoryChange,
            categoryFilter: categoryFilter 
        }
    }

    angular
        .module("Main.products")
        .factory('productsService', productsService);

})();

我希望有人可以帮助我！

Answer 1

您似乎没有将saveProduct导出为公共服务方式：

return{
    getProducts: getProducts,
    getProduct: getProduct,
    getCategories: getCategories,
    getCategoriesSelected: getCategoriesSelected,
    productFilter: productFilter,
    categoryChange: categoryChange,
    categoryFilter: categoryFilter 
}

TypeError：undefined不是函数（AngularJS）

1 个答案: