AngularJS 工厂变量未定义

Posted 2023-03-10

【中文标题】AngularJS 工厂变量未定义

【英文标题】：AngularJS Factory Variable Becomes Undefined

【发布时间】：2015-09-19 02:01:12

【问题描述】：

我在工厂中有一个用户变量，它在切换控制器后一直未定义。我在一个控制器中设置变量。当我登录用户时，它会显示我期望的数据，但是当我切换控制器并检索变量时，它再次未定义。代码如下：

discussionBoard.factory('userFactory', function($http)

    console.log("I'm loading the userFactory");

    var user = ;

    var factory = ;

    factory.createUser = function(user, callback)
        $http.post('/users/new', user: user)
            .success(function(response)
                user = response[0];
                callback(user);
            )
    

    factory.retrieveUser = function(callback)
        callback(user);
    

    console.log(user);

    return factory;

);

discussionBoard.controller('dashCtrl', function($scope, topicFactory, userFactory)

    $scope.createTopic = function()
        topicFactory.createTopic(function(topic)
            $scope.topic = topic;
        )
    

    userFactory.retrieveUser(function(user)
        $scope.user = user;
    );

);

编辑：经过更多的试验，我能够通过将用户添加为工厂对象中的对象来使其工作。然而，这实际上提出了另一个问题，即工厂如何在这里与 AJAX 交互，因为 .success() 似乎无法访问工厂的范围。这是有效的代码，但我很好奇是否有人能说出为什么以这种方式排列：

discussionBoard.factory('userFactory', function($http)

    var factory = ;

    factory.createUser = function(user, callback)
        $http.post('/users/new', user: user)
            .success(function(response)
                factory.user = response[0];
                callback(factory.user);
            )
    

    factory.user = ;

    factory.retrieveUser = function(callback)
        callback(factory.user);
    

    return factory;

);

discussionBoard.controller('dashCtrl', function($scope, topicFactory, userFactory)

    $scope.createTopic = function()
        topicFactory.createTopic(function(topic)
            $scope.topic = topic;
        )
    

    userFactory.retrieveUser(function(user)
        $scope.user = user;
    );

);

【问题讨论】：

创建单例服务。这是链接（描述在 AngularJS 中创建单例的 4 种不同方法）：blog.jdriven.com/2013/03/…

【参考方案1】：

通过为 createUser 函数提供一个同名参数，您已经隐藏了工厂的 user 变量。

var user = ; // <- this is going to be shadowed!

var factory = ;

factory.createUser = function(user, callback) //<- note the user argument!
    $http.post('/users/new', user: user)
        .success(function(response)
            user = response[0];
            callback(user);
        )

所以当成功回调设置user 时，它会找到与该名称最接近的变量，即 createUser 函数的参数。否则这两种方法都很好 - 事实上第一种更好，如果你想让用户字段只能通过 getter 访问（在第二种情况下，如果工厂被注入，任何控制器都可以获得对用户的直接引用）。