AngularJS在控制器之间传递数据失败

时间:2016-03-07 14:12:28

标签: javascript angularjs

正如我在其他帖子中所提到的,我仍然是AngularJS的新手,我在理解它的'来龙去脉时遇到了很多困难。

我已经到了一个阻塞点,我试图在存储对象列表的控制器和另一个用户可以在不同视图中编辑单个对象的控制器之间传递数据。

我已尝试使用自己的工厂,但是如果我在index.html文件中引用该服务(它是单页应用程序),我会得到有关我的NavigationController状态的错误,该状态不使用有问题的服务。

我的工厂代码如下:

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

app.factory('CharacterData', function() {
    var data = {
        Name: '',
        Description: '',
        TotalExperience: 0,
        RemainingExperience: 0
    }

    return {
        getName: function() {
            return data.Name;
        },

        setName: function(name) {
            data.Name = name;
        },

        getDescription: function() {
            return data.Description;
        },

        setDescription: function(description) {
            data.Description = description;
        },

        getTotalExperience: function() {
            return data.TotalExperience;
        },

        setTotalExperience: function(totalxp) {
            data.TotalExperience = totalxp;
        },

        getRemainingExperience: function() {
            return data.RemainingExperience;
        },

        setRemainingExperience: function(exp) {
            data.RemainingExperience = exp;
        }
    };
});

我已将这个工厂注入需要它的两个控制器(CharacterListController和CharacterEditController),代码如下:

(function(){
    angular.module('MyAppName')
        .controller('CharacterEditController', ['$scope', '$state', '$http', '$location', function ($scope, $state, $http, $location, CharacterData){

            /**
             *
             */
            $scope.readCharacter = function() {
                $scope.currentCharacter.name = CharacterData.getName();
                $scope.currentCharacter.description = CharacterData.getDescription();
                $scope.currentCharacter.totalExperience = CharacterData.getTotalExperience();
                $scope.currentCharacter.remainingExperience = CharacterData.getRemainingExperience();
            }

...
}]);
}());

以及传递相关字符的列表控制器:

(function(){
    angular.module('TimeWaste')
        .controller('CharacterListController',['$scope', '$state', '$http','$location', function($scope, $state, $http, $location, CharacterData){

.... more functions ... 

            $scope.updateCurrentCharacter = function(req, res) {

                CharacterData.setName($scope.character.name);
                CharacterData.setDescription($scope.character.description);
                CharacterData.setTotalExperience($scope.character.totalExperience);
                CharacterData.setRemainingExperience($scope.character.remainingExperience);

                $location.path('/edit-character');
            }

 }]);

}());

我不明白的是,NavigationController在传递数据时必须做些什么。我引用了我的服务:

What I get when the service is added to index.html

我不知道它究竟是如何工作的或为什么会出现这个问题。我一直在关注教程,主要是因为我一直在做的事情,但正如我所说,我仍然在我的MEAN Stack / Angular ABCs

任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:1)

你没有正确地注射它:

['$scope', '$state', '$http', '$location', 'CharacterData', function ($scope, $state, $http, $location, CharacterData){}]

答案 1 :(得分:0)

你错过了在依赖数组中列出CharacterData

['$scope', '$state', '$http', '$location', 'CharacterData', function ($scope,    $state, $http, $location, CharacterData){ ...

答案 2 :(得分:0)

您的控制器不在同一模块上。 CharacterListController位于 TimeWaste 模块上,CharacterEditController位于 MyAppName 上,CharacterData也是如此。

尝试使用相同的模块或将其添加到您的应用依赖项中。