Partage de données entre les contrôleurs de 2 pages différentes à l'aide d'Angularjs

Question

La tâche consiste à sélectionner un périphérique dans une zone de sélection et à afficher les propriétés liées au nom, par exemple Nom, type, périphérique_famille, etc. sur l'autre page.

Le problème que j'obtiens est que les données sont définies dans le 1er contrôleur. C'est bien, mais il ne va pas à la page suivante qui utilise DeviceController2. L'alerte de DeviceController2 n'affiche aucune valeur. Je dois juste envoyer l'appareil à la page suivante.

Pour cela, mon 1er contrôleur est

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 est mon service commun pour les contrôleurs.

2ème contrôleur est

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

Et le commonDeviceService est

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

Souvent, nous devons garder un état de session client dans notre application AngularJS il survivrait rafraîchir la page et navigations dans l'application.pour de tels cas, vous pouvez utiliser window.sessionStorage $

Régulateur1:

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

Controller2:

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

cela servira votre but de partager des données entre les contrôleurs mais il faut garder à l'esprit que son La capacité de stockage est limitée à 5 Mo. Aussi, si vous ouvrez un nouvel onglet à la même adresse, il s'agira d'un nouvel objet sessionStorage. Référence: $window.sessionStorage vs $cookieStore

J'ai supprimé le code pour l'usine angulaire en supposant que son seul but était ce partage de données qui a maintenant été rempli par le stockage de session.

Answer 2

Comment vous affichez la nouvelle page? La nouvelle page est-elle simplement un modèle dans lequel vous affichez ou s'agit-il d'un nouveau code HTML avec sa propre application ng?

Si vous pouvez vous fournir un balisage HTML, ce serait vraiment utile.

Answer 3

Cela se produit parce que vous recharger la page en faisant ceci:

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

Ainsi, l'ensemble de l'application angulaire et toutes se rechargées données sont perdues.

Vous devez utiliser le service $location pour la navigation. Ainsi, compte tenu de la configuration de routage suivante:

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

vous pouvez accéder à la page 2 du code en faisant ceci:

$location.path('/page2'); 

Answer 4

Essayez avec des changements donnés. Faire une fonction dans controller2 et appeler cela sur le chargement de la page, dans cette fonction obtenir des données du service.

Ici, vous essayez d'obtenir des données qui ne sont peut-être pas encore définies.

2ème contrôleur est

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

Vous pouvez le faire en cédé la place et

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