js，页面2返回页面1时定位进入的设备

Question

页面2

$scope.changeToPreStep = function () {
                if ($stateParams.data.fromProgram) {
                    $scope.$root.changeProgram($stateParams.data.fromProgram, {
                        machine_list: $stateParams.data.machine_list,
                        //selectmachineItem:$stateParams.data.machine_Item,
                    }, true); 
                }
            }

页面1

{
                        name: $filter('translate')('G0101.menuTitle'), status: ['Q', 'R', 'C', 'W'], programName: 'G0101',
                        init: function () {
                           $scope.$root.changeProgram('G0101', {
                                data: {
                                    machine_no:$scope.machineItem.machine_no,//H-19207
                                    plot_no: $scope.plotItem.plot_no,
                                    op_no: $scope.plotItem.op_no,
                                    op_name: $scope.plotItem.op_name,
                                    machine_list: $stateParams.machine_list,
                                    fromProgram: 'B0215',
                                    selectmachineItem:$scope.selectmachineItem,
                                }
                            });
                        }
                    },


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/b696c4dbd36f45d284a1c0b23efb9c84.png "#left")

点击页面1的设备进入页面2，怎么让页面2返回时定位到页面1的设备，不会刷新回到第一台设备

Answer 1

引自免费微信小程序：皆我百晓生

为了实现从页面2返回到页面1时定位到之前选择的设备，你需要在两个页面之间共享状态。在这种情况下，可以利用 AngularJS 的服务（service）来保存和传递数据。这里是一个详细的步骤来解决这个问题：

首先，创建一个名为 MachineService 的服务来存储和获取设备信息：

// 创建 MachineService.js 文件
angular.module('yourApp').factory('MachineService', ['$rootScope', function ($rootScope) {
    var machineInfo = {};

    return {
        setMachineInfo: function(info) {
            machineInfo = info;
            $rootScope.$broadcast('machineInfoChanged');
        },
        getMachineInfo: function() {
            return machineInfo;
        }
    };
}]);

接下来，在页面1中初始化并设置设备信息：

// 在页面1的控制器中
angular.module('yourApp').controller('Page1Ctrl', ['$scope', '$filter', 'MachineService', function ($scope, $filter, MachineService) {
    $scope.init = function () {
        // ...其他代码...

        // 设置初始设备信息
        MachineService.setMachineInfo({
            machine_no: $scope.machineItem.machine_no,
            plot_no: $scope.plotItem.plot_no,
            op_no: $scope.plotItem.op_no,
            op_name: $scope.plotItem.op_name,
            machine_list: $stateParams.machine_list,
            fromProgram: 'B0215',
            selectmachineItem: $scope.selectmachineItem
        });

        // 监听机器信息变化，以便于更新页面
        $scope.$on('machineInfoChanged', function() {
            $scope.currentMachineInfo = MachineService.getMachineInfo();
        });
    };

    // ...其他代码...
}]);

然后，在页面2中改变回退操作，将设备信息通过 MachineService 存储，并调用 $state.go() 方法返回到页面1：

// 在页面2的控制器中
angular.module('yourApp').controller('Page2Ctrl', ['$scope', '$stateParams', '$state', 'MachineService', function ($scope, $stateParams, $state, MachineService) {
    $scope.changeToPreStep = function () {
        if ($stateParams.data.fromProgram) {
            // 保存设备信息到 MachineService
            MachineService.setMachineInfo({
                machine_no: $stateParams.data.machine_list[0].machine_no, // 假设 machine_list 是一个数组，这里取第一个元素作为示例
                plot_no: $stateParams.data.plot_no,
                op_no: $stateParams.data.op_no,
                op_name: $stateParams.data.op_name,
                machine_list: $stateParams.data.machine_list,
                fromProgram: $stateParams.data.fromProgram,
                selectmachineItem: $stateParams.data.selectmachineItem
            });

            // 使用 $state.go 返回页面1，并添加机器信息到查询参数
            $state.go('page1', {
                machineInfo: JSON.stringify(MachineService.getMachineInfo())
            });
        }
    };
}]);

最后，在页面1中接收并应用返回的设备信息：

// 在页面1的控制器中
angular.module('yourApp').controller('Page1Ctrl', ['$scope', '$filter', 'MachineService', '$state', function ($scope, $filter, MachineService, $state) {
    // ...其他代码...

    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        if (toState.name === 'page1' && toParams.machineInfo) {
            var receivedMachineInfo = JSON.parse(toParams.machineInfo);
            MachineService.setMachineInfo(receivedMachineInfo);
            $scope.currentMachineInfo = receivedMachineInfo;
        }
    });

    // ...其他代码...
}]);

这样，当用户从页面2返回到页面1时，页面1会接收到设备信息并自动定位到之前的设备。

注意：这个例子假设你已经正确地配置了 AngularJS 的路由模块 $stateProvider 和 $urlRouterProvider。如果你有多个页面，可能需要调整监听器的范围，确保只在特定页面上触发事件处理程序。