使用 Angularjs 在 2 个不同页面的控制器之间共享数据

Question

任务是在select框中select一个设备，并在另一页显示与名称相关的属性，即名称、类型、device_family等。

我遇到的问题是数据是在第一个控制器中设置的。这很好，但它不会转到使用 DeviceController2 的下一页。 DeviceController2 的警报不显示任何值。我只需要将设备发送到下一页。

为此，我的第一个控制器是

App.controller('DeviceController', function($scope,$http,commonDeviceService) {
    var self = this;
    self.show = function(device){
        commonDeviceService.set(device);
        alert("Device selected is "+device);
        window.open('url to next page');
    };
});

commonDeviceService 是我为控制器提供的公共服务。

第二个控制器是

App.controller('DeviceController2', function($scope,$http,commonDeviceService) {
    $scope.device = commonDeviceService.get();
    alert($scope.device);
});

而 commonDeviceService 是

App.factory('commonDeviceService', function() {
    var shareddata='';

   function set(data) {
       shareddata = data;
       alert("shared data in set call is "+shareddata);
   }

   function get() {
       alert("shared data in get call is "+ shareddata);
       return shareddata;
   }

   return {
       set: set,
       get: get
   };
});

Answer 1

您如何显示新页面？新页面只是您在其中呈现的模板还是带有自己的 ng-app 的新 HTML？

如果您能为您提供 HTML 标记，那将非常有帮助。

Answer 2

发生这种情况是因为您正在重新加载页面：

window.open('url to next page');

因此整个 angular 应用程序被重新加载并且所有数据都丢失了。

您应该使用 $location 服务进行导航。因此，给定以下路由配置：

    angular.module('app')
    .config(function($routeProvider) {
        $routeProvider.when('/page1', {templateUrl: 'page1.html', controller: 'Page1Controller'});
        $routeProvider.when('/page2', {templateUrl: 'page2.html', controller: 'Page2Controller'});
    });

您可以通过执行以下操作从代码导航到 page2：

$location.path('/page2');

Answer 3

尝试给定的更改。在 controller2 中创建一个函数并在页面加载时调用它，在该函数中从服务获取数据。

此处您正在尝试获取可能尚未设置的数据。

2nd controller is

App.controller('DeviceController2', function($scope,$http,commonDeviceService) {
    var self = this;
    $scope.device = null;

    self.show = function(){
        $scope.device = commonDeviceService.get();
        alert($scope.device);
    };

    self.show();
});

你也可以按照给定的方式做

Controller2

App.controller('DeviceController2', function($scope,$http,commonDeviceService) {
var self = this;
$scope.device = null;
self.show = function(){
        commonDeviceService.get().then( function(data) {
            $scope.device = data;
            alert($scope.device);
        }, function(error) {
            //error
        });
};
 self.show();
});

Service

App.service('commonDeviceService', function() {
    var shareddata = null;

   function set(data) {
       shareddata = data;
       alert("shared data in set call is "+shareddata);
   }

   function get() {
       alert("shared data in get call is "+ shareddata);
       return shareddata;
   }

   var data = {
       set: set,
       get: get
   };

   return data;
});

Answer 4

我们通常需要在我们的 angularjs 应用程序中保持客户端会话状态，以便它能够在应用程序内的页面刷新和导航中继续存在。对于这种情况，您可以使用 $window.sessionStorage

控制器 1：

App.controller('DeviceController', function($scope,$http,$window) {
var self = this;
self.show = function(device){
    $window.sessionStorage.device = device;
    alert("Device selected is "+device);
    window.open('url to next page');
};
});

控制器 2：

App.controller('DeviceController2', function($scope,$http,$window) {
$scope.device = $window.sessionStorage.device;
alert($scope.device);
});

这将满足您在控制器之间共享数据的目的，但请记住它的存储容量限制为 5MB。此外，如果您打开一个新选项卡到完全相同的 URL，它将是一个新的 sessionStorage 对象。参考：$window.sessionStorage vs $cookieStore

我已经删除了 angular 工厂的代码，假设它的唯一目的是用于此数据共享，现在已由会话存储实现。

使用 Angularjs 在 2 个不同页面的控制器之间共享数据

Sharing data between controllers of 2 different pages using Angularjs

html

javascript

controllers

angularjs