AngularJS : undefined 不是来自工厂的函数

Question

我的工厂内部有多个函数，我无法使用 ng-click 从按钮单击调用我的 saveCharacter 函数。 getCharacters 函数工作得很好。提前为 repost 道歉，我已经查看了许多不同的示例，但无法解决我的特定问题。当我登录 xmlService 时，我可以看到我的功能，但我不确定为什么它不会调用它。我试图 return post 到 saveCharacter 中的 PHP 文件，但更改为字符串 return 以尝试测试以查看我的问题所在。

再次感谢您的帮助。

(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;

这是否允许我在视图端访问 returned 数据？我是否必须重置我的 saveFighter 函数中的范围才能使我的按钮起作用？

我是否为我的 app.controller 正确设置了依赖关系，这就是依赖注入吗？

谢谢大家，非常感谢任何关于我的代码设置的评论！

Answer 1

您缺少调用函数 () 将代码更改为：

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

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

$scope.FighterController = charactersList;正在将 characterList 的数据分配给作用域变量，作用域变量在 html 中是可访问的，作用域就像控制器和视图之间的桥梁。

我推荐你start reading angularjs

Answer 2

我将我的工厂调整为这种结构，现在我可以调用我的函数了。

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

Answer 3

你还没有真正解释你做了什么来解决这个问题，所以我来解释一下。

在这里，您正在尝试调用 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() 函数 returns 字符串 "hello"。此字符串没有 success 属性。 success 又是 undefined，所以现在会导致同样的错误。

要修复该错误，您只需删除 return "hello"; 并取消注释您注释掉的代码：

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

解决这两个问题应该可以解决您的问题。

AngularJS : undefined 不是来自工厂的函数

AngularJS : undefined is not a function from factory

javascript

angularjs

angularjs-factory