javascript - Angular 工厂方法不是函数(dataFactory.addContact 不是函数)

Question

我正在尝试将 Controller 和工厂拆分为单独的文件。然而，当单独的工厂方法生成一个错误:“dataFactory.addContact 不是一个函数”......我确信我错过了一些基本的东西。

//错误

TypeError: dataFactory.addContact is not a function
at Scope.$scope.AddContactToDb (http://localhost:3000/assets/js/controllers/contacts/main.js:28:15)
at Scope.$scope.AddContact (http://localhost:3000/assets/js/controllers/contacts/main.js:56:25)
at fn (eval at <anonymous> (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js:13391:15), <anonymous>:2:229)
at ngEventDirectives.(anonymous function).compile.element.on.callback (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js:23619:17)
at Scope.$get.Scope.$eval (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js:16058:28)
at Scope.$get.Scope.$apply (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js:16158:25)
at HTMLInputElement.<anonymous> (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js:23624:23)
at HTMLInputElement.eventHandler (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js:3299:21)(anonymous function) @ angular.js:12546$get @ angular.js:9307$get.Scope.$apply @ angular.js:16163(anonymous function) @ angular.js:23624eventHandler @ angular.js:3299
(anonymous function) @ angular.js:12546
$get @ angular.js:9307
$get.Scope.$apply @ angular.js:16163
(anonymous function) @ angular.js:23624
eventHandler @ angular.js:3299

这是我的代码:

//datafactory.js

app.factory('dataFactory', ['$http', function ($http){

    var dataFactory = {

        getContactList: function(){
            return $http.get("/api/contacts"); 
        },
        addContact: function(newContact){
            return $http.post("/api/contacts", newContact);  
        }

    };


    return dataFactory;
}]);

//controller.js

app.controller('contactlist', ['$scope', '$http', '$routeParams', 'dataFactory', function ($scope, $http, $routeParams, dataFactory){

    //get contact list
    dataFactory.getContactList().success(function(response){ //<< works
        $scope.contacts = response;
    });
    //add contact to db 
    $scope.AddContactToDb = function(newContact){

        dataFactory.addContact(newContact).success(function(){ //<< fails (dataFactory.addContact is not a function)

            $scope.Status = "New contact: '" + newContact.name + "' was successfully inserted.";

        }).error(function(error){

            console.log(error);

        });
    };

//add contact
$scope.AddContact = function(){

    if($scope.contactform.$valid) {

        var newContact = 
        {
            name : $scope.Contact.Name,
            email : $scope.Contact.Email,
            number : $scope.Contact.Number
        };

        $scope.contacts.push(newContact);

        var success = $scope.AddContactToDb(newContact);

        if(success){
            resetForm();
        }

    } else {

        return;

    }
};
}]);

Answer 1

我确实看到有 2 个名为 addContact 的方法。区别在于区分大小写。请调用方法“AddContact”而不是“addContact”。

希望这能起作用。