AngularJS：undefined不是工廠提供的函數

Question

我的工廠內部有多個功能，無法使用ng-click通過單擊按鈕調用saveCharacter函數。 getCharacters函數可以正常工作。 抱歉，我無法重新發布帖子，我已經瀏覽了許多不同的示例，但無法解決這些問題。 登錄xmlService時可以看到我的函數，但是我不確定為什么它不會調用它。 我試圖將帖子返回到saveCharacter中的PHP文件，但是更改為字符串返回以嘗試測試以查看問題所在。

再次感謝任何幫助。

(function(){

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

app.factory('xmlService', function($http){

    var factory = {};

    factory.getCharacter = function getCharacter(){         
        return $http.get('xml/characterTemplate.xml');
    };
    factory.saveCharacter = function saveCharacter(){
        return "hello";
        //return $http.post('php/crud.php');
    };

    return factory;

});

app.controller('FighterController', ['$scope','xmlService', function($scope, xmlService){
    this.fighterList = fighterList;


    $scope.saveFighter = function saveFighter(){
        console.log(xmlService);
        xmlService.saveCharacter.success(function(data){
            console.log(data);
        });
    }

    function loadFighters(){


        xmlService.getCharacter().success(function(data){
            var x2js = new X2JS(); 
            var charactersList  = x2js.xml_str2json(data);

            for(var i = 0; i < charactersList.characters.character.length; i++)
            {
                var currentFighter = charactersList.characters.character[i];
                fighterList.push(currentFighter);

            }                
            $scope.FighterController = charactersList;
        });
    }
    loadFighters();
}]);



var fighterList = [
];

})();

在編寫第一個Angular應用程序時遇到的其他問題，代碼的目的是什么：

$scope.FighterController = charactersList;

這是否允許我在視圖側訪問返回的數據？ 我必須在saveFighter函數中重置作用域以使按鈕正常工作嗎？

我是否為我的app.controller正確設置了依賴項，並且該依賴項注入是嗎？

謝謝大家，對於如何設置我的代碼的任何評論都將不勝感激！

Answer 1

您尚未真正解釋過解決此問題的方法，因此我將對其進行解釋。

在這里，您嘗試調用xmlService.saveCharacter.success() ：

xmlService.saveCharacter.success(function(data){
        console.log(data);
});

但是xmlService.saveCharacter是一個函數。 它沒有success屬性； success是不確定的。 因此，這給出了您所看到的錯誤。

您需要調用 xmlService.saveCharacter() ：

xmlService.saveCharacter().success(function(data){
        console.log(data);
});

但這仍然是一個問題，因為saveCharacter()函數返回字符串"hello" 。 該字符串沒有success屬性。 再一次， success是undefined ，因此現在會導致相同的錯誤。

要解決該錯誤，您只需要刪除return "hello"; 並取消注釋您已注釋掉的代碼：

factory.saveCharacter = function saveCharacter(){
    return $http.post('php/crud.php');
};

解決這兩個問題應該可以解決您的問題。

Answer 2

您缺少使用()將代碼更改為以下內容的功能：

$scope.saveFighter = function saveFighter(){
    console.log(xmlService);

    xmlService.saveCharacter().success(function(data){
    // ----------------------^
        console.log(data);
    });
 }

$scope.FighterController = charactersList; 將characterList的數據分配給作用域變量，作用域變量可以在html作用域中訪問，就像控制器和視圖之間的橋梁一樣。

我建議您開始閱讀angularjs

Answer 3

我將工廠調整為這種結構，現在可以調用函數了。

app.factory('xmlService', function($http){

    var factory = {
        getCharacter: function(){
            return $http.get('xml/characterTemplate.xml');
        },
        saveCharacter:function(){
            console.log('hello?');
            return $http.post('php/crud.php');
        }
    };
    return factory;

}); 

在我的控制器中

$scope.saveFighter = function(){
        console.log(xmlService);
        xmlService.saveCharacter().success(function(data){
            console.log(data);
        });

    }

    function loadFighters(){
        xmlService.getCharacter().success(function(data){
            var x2js = new X2JS(); 
            var charactersList  = x2js.xml_str2json(data);

            for(var i = 0; i < charactersList.characters.character.length; i++)
            {
                var currentFighter = charactersList.characters.character[i];
                fighterList.push(currentFighter);

            }                
            $scope.FighterController = charactersList;
        });
    }
    loadFighters();