Question

我的AngularJS（版本1.4）应用程序中有一个工厂。代码位于主app.js文件中：

.factory('UserPreferences', function($http, URL, AuthService, store){

    var userPreferences = {
        "face_shape": '',
        "lifestyle": '',
        "hair_texture": '',
        "email": '',
        "postcode": '',
        "full_name": '',
        "password": ''
    };

    return {
        save_face_shape: function(face_shape){
            userPreferences.face_shape = face_shape;
            console.log(userPreferences); // -> LINE 307
        },
        save_lifestyle: function(lifestyle){
            userPreferences.lifestyle = lifestyle;
            console.log(userPreferences); // -> LINE 311
        },
        save_hair_texture: function(texture){
            userPreferences.hair_texture = texture;
        },
        get_data: function(){
            return userPreferences;
        }
    }
}). // -> here's another factory

我尝试做的是通过应用程序中的不同步骤保存用户偏好，并在触发事件后将整个用户保存在数据库中。

在我执行此操作的页面的控制器中，我有以下代码：

$scope.triggerSecondStep = function(shape){
    UserPreferences.save_face_shape(shape);
    $scope.step = 2;
}

$scope.triggerThirdStep = function(lifestyle){
    UserPreferences.save_lifestyle(lifestyle);
    $scope.step = 3;
}

在控制器的视图中，我以一种非常简单的方式调用这些函数：

 <img ng-click="triggerSecondStep('square')" class='hover-opacity' ng-src="LINK_IMAGE" />

由于它不起作用，我添加了一些console.log来打印中间步骤。我发现当我拨打console.log时，第307行的triggerSecondStep打印出以下输出：

app.js:307 Object {face_shape: "round", lifestyle: "", hair_texture: "", email: "", postcode: ""…}
app.js:307 Object {face_shape: undefined, lifestyle: "", hair_texture: "", email: "", postcode: ""…}

第311行console.log的输出如下：

app.js:311 Object {face_shape: undefined, lifestyle: "busy", hair_texture: "", email: "", postcode: ""…}
app.js:311 Object {face_shape: undefined, lifestyle: undefined, hair_texture: "", email: "", postcode: ""…}

所以基本上我无法弄清楚为什么数据不会从一个调用存储到另一个调用，以及为什么console.log打印两次输出而不是只打印一次。

任何人都可以提供帮助吗？

编辑：

阅读评论后更新问题（谢谢顺便说一句）。

如果我在console.log中添加一些triggerSecondStep：

$scope.triggerSecondStep = function(shape){
    console.log(shape);
    UserPreferences.save_face_shape(shape);
    console.log(UserPreferences.get_data());
    $scope.step = 2;
}

这是输出（landing_compiled只是landing.js的编译版本，带有babel）：

square
app.js:308 Object {face_shape: "square", lifestyle: "", hair_texture: "", email: "", postcode: ""…}
landing.compiled.js:72 Object {face_shape: "square", lifestyle: "", hair_texture: "", email: "", postcode: ""…}
landing.compiled.js:70 undefined
app.js:308 Object {face_shape: undefined, lifestyle: "", hair_texture: "", email: "", postcode: ""…}
landing.compiled.js:72 Object {face_shape: undefined, lifestyle: "", hair_texture: "", email: "", postcode: ""…}

如果我在第307行添加debugger;，我会看到以下stackstrace：

一旦我到达最后一步（r.handle），它就会重新开始，这次没有参数。

Answer 1

你们是对的：基本上在触发函数triggerSecondStep的图像元素之外有一个div在ng-click上调用相同的函数：

<div ng-click="triggerSecondStep()" class='title-widget margin-bottom'>What's your face <span class='transparent-font'>shape</span>?</div>
...
...
...
 <img ng-click="triggerSecondStep('square')" class='hover-opacity' ng-src="LINK_IMAGE" />

Answer 2

我创建了相同数据的小提琴，供您参考：

Fiddle

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

Angular工厂不保留数据

2 个答案: