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

Question

任务是在选择框中选择一个设备，并在另一个页面上显示与名称相关的属性，即名称、类型、设备系列等。

我遇到的问题是数据被设置在第一个控制器中。这很好，但它不会转到使用 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

通常我们需要在我们的 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 工厂的代码，假设它的唯一目的是为了这种数据共享，现在已经通过会话存储来实现。

Answer 2

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

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

Answer 3

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

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 4

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

您在这里尝试获取可能尚未设置的数据。

第二个控制器是

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();
});

你也可以用给定的方式来做

控制器2

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();
});

服务

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;
});