Freigeben von Daten zwischen Controllern von 2 verschiedenen Seiten mit Angularjs

Question

Die Aufgabe besteht darin, ein Gerät in einem Auswahlfeld auszuwählen und auf der anderen Seite die Eigenschaften anzuzeigen, die mit dem Namen in Beziehung stehen, z. B. Name, Typ, Gerät_Familie usw.

Das Problem, das ich bekomme, ist, dass die Daten in der 1. Controller eingestellt werden. Das ist in Ordnung, aber es geht nicht auf die nächste Seite, die DeviceController2 verwendet. Die Warnung von DeviceController2 zeigt keinen Wert darin an. Ich muss das Gerät nur zur nächsten Seite schicken.

Dazu mein erster Controller ist

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 für den Controller mein gemeinsamer Dienst ist.

zweite Controller ist

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

Und die commonDeviceService ist

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

Oft brauchen wir einen Client-Sitzung Zustand in unserer AngularJS Anwendung zu halten, so würde es Aktualisierung der Seite und Navigationen innerhalb der Anwendung überleben.

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: für solche Fälle können Sie $ window.sessionStorage

Controller1 verwenden

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

dies wird dazu dienen, Ihre Zwecke der gemeinsamen Nutzung von Daten zwischen den Controllern, aber man sollte nicht vergessen, dass seine Die Speicherkapazität ist auf 5 MB begrenzt. Wenn Sie eine neue Registerkarte für dieselbe URL öffnen, wird dies ein neues sessionStorage-Objekt. Referenz: $window.sessionStorage vs $cookieStore

Ich habe den Code für eckige Fabrik entfernt unter der Annahme, dass es nur Zweck war für diese gemeinsame Nutzung von Daten, die jetzt von Sitzungsspeicher erfüllt wurde.

Answer 2

Wie werden Sie die neue Seite angezeigt wird? Ist die neue Seite nur eine Vorlage, in der Sie rendern, oder handelt es sich um einen neuen HTML-Code mit einer eigenen ng-App?

Wenn Sie HTML-Markup bereitstellen können, wäre es sehr hilfreich.

Answer 3

Dies geschieht, weil Sie die Seite neu zu laden sind, indem Sie diese:

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

So ist die gesamte Winkel Anwendung neu geladen wird und alle Daten verloren gehen.

Sie sollten den Dienst $location für die Navigation verwenden. Also, mit dem folgende Routing-config:

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

Sie zum page2 von Code navigieren, indem Sie diese:

$location.path('/page2'); 

Answer 4

mit bestimmten Änderungen Versuchen. Machen Sie eine Funktion in Controller2 und rufen Sie diese beim Laden der Seite, in dieser Funktion erhalten Daten aus dem Dienst.

Hier versuchen Sie, Daten zu erhalten, die möglicherweise noch nicht festgelegt sind.

2. Controller ist

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

Sie es Art und Weise in bestimmten tun können auch

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

Dienst

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