AngularJS中Factory跨控制器共享数据失败问题求助

看起来你遇到的核心问题有两个：页面刷新导致Angular应用状态丢失，以及异步请求未完成就跳转导致数据还没存入Factory。我来一步步帮你解决：

为什么原来的代码无法正常工作？ #

• 页面刷新重置应用状态：你用window.location = "product-details.html"跳转页面，这会导致整个浏览器页面刷新，AngularJS应用会被完全重新初始化。Factory虽然是单例服务，但页面刷新后所有服务都会重新创建，之前存在productDetails.details里的数据自然就丢失了。
• 异步请求未完成就跳转：你的getProductDetails函数没有返回Promise，而且跳转操作是同步执行的，很可能在HTTP请求还没拿到响应、数据还没存入Factory的时候，页面已经跳转了，第二个Controller自然拿不到数据。

修复步骤与代码修改 #

1. 修改Factory，让它返回Promise并正确存储数据 #

确保Factory的函数返回Promise，这样调用者可以等待请求完成后再执行后续操作，同时把响应数据（通常是response.data而非整个response对象）存入Factory：

productDetails.getProductDetails = function(sessionId, product) { 
    console.log("Getting the product details");
    // 返回$http的Promise
    return $http({
        method: "POST", 
        url: "some_url", 
        data: {"some_data": product} // 修正原代码中无效的JSON格式
    })
    .then(function(response){ 
        productDetails.details = response.data; // 存储响应的实际数据
        console.log(productDetails.details);
        return productDetails.details; // 把数据返回给调用者
    }, function(err){ 
        console.log("Couldn't get the product details: "+err);
        throw err; // 抛出错误，让调用者可以捕获处理
    });
}

2. 改用Angular路由跳转，避免页面刷新 #

不要用window.location，改用Angular的$location服务或者路由库（比如ngRoute）来管理页面跳转，这样页面不会刷新，应用状态会保留。

首先，确保你的应用依赖了ngRoute模块，然后配置路由：

angular.module('yourApp', ['ngRoute'])
.config(function($routeProvider) {
    $routeProvider
        // 第一个页面的路由（示例）
        .when('/', {
            templateUrl: 'your-first-page.html',
            controller: 'FirstController'
        })
        // 商品详情页的路由
        .when('/product-details', {
            templateUrl: 'product-details.html',
            controller: 'SecondController'
        })
        .otherwise({redirectTo: '/'});
});

然后修改第一个Controller，注入$location，等待Promise完成后再跳转：

angular.module('yourApp').controller('FirstController', function($scope, $location, productService) {
    $scope.displayProductDetails = function(product){ 
        productService.getProductDetails($scope.userSession, product)
            .then(function() {
                // 请求完成后跳转到详情页路由
                $location.path('/product-details');
            })
            .catch(function(err) {
                // 处理错误，比如给用户提示
                alert('获取商品详情失败，请重试');
                console.error(err);
            });
    };
});

3. 在第二个Controller中获取Factory存储的数据 #

现在第二个Controller只需要注入Factory，就能直接拿到存储的数据了：

angular.module('yourApp').controller('SecondController', function($scope, productService) {
    // 直接从Factory获取数据
    $scope.productDetails = productService.details;
    console.log($scope.productDetails); // 现在应该能正常输出数据了

    // 额外处理：如果用户直接访问详情页路由，可能数据还没加载
    if (!$scope.productDetails) {
        // 这里需要确保sessionId和product能获取到，比如存在localStorage或$rootScope中
        var sessionId = localStorage.getItem('userSession');
        var product = ...; // 根据实际情况获取商品信息
        productService.getProductDetails(sessionId, product)
            .then(function(data) {
                $scope.productDetails = data;
            });
    }
});

额外建议 #

• 对于需要跨页面保留的数据，除了用Factory，还可以考虑用$rootScope或者localStorage（适合持久化数据），但Factory是Angular中管理共享数据的最佳实践之一。
• 确保你的HTTP请求的data格式正确，原代码中的{"some_data"}是无效的JSON，需要写成键值对形式。

内容的提问来源于stack exchange，提问作者Lokesh Pandey