Question

任务是在选择框中选择一个设备，并在另一页上显示与名称相关的属性，即名称，类型，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');

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

您应该使用$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中创建一个函数，并在页面加载时调用该函数，在该函数中从服务中获取数据。

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

第二个控制器是

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

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

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

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

4 个答案: