AngularJS 1.6.1, TypeScript, UI Bootstrap Modal: Pourquoi mes variables globales sont-elles stockées dans le stockage de session mis à jour par le modal?

Question

S'il vous plaît aider un newb out. J'utilise ngStorage pour stocker des variables globales:

//Global Controller 
saveGlobalSettings =() => { 
     this.$sessionStorage.QuoteTimes = this.quoteTimes; 
     this.$sessionStorage.QuoteTypes = this.quoteTypes; 
    }; 

J'utilise une autre méthode dans un autre contrôleur pour créer des objets qui utilisent certaines des variables globales comme propriétés:

// Create Controller 
addChannel = (channel) => {    
     channel.QuotingChannelType = channel.QuotingChannelId;    
     console.log(this.$sessionStorage.QuoteTimes); 
     channel.QuoteTypes = this.$sessionStorage.QuoteTypes; 
     channel.QuoteTimes = this.$sessionStorage.QuoteTimes; 
     if (!this.myChannels) { this.myChannels = []; } 
     this.myChannels.push(channel);   
    }; 

Je suis puis en utilisant ng-repeat pour afficher les objets dans myChannels dans le navigateur. Lorsque vous cliquez dessus, je passe l'objet à une méthode openDialog():

openPreferencesDialog = (channel) => { 
     var options: ng.ui.bootstrap.IModalSettings = { 
      templateUrl: 'app/form/templates/editChannelPreferences.html', 
      controller: 'EditDialogController', 
      controllerAs: '$ctrl', 
      resolve: { 
       channel:() => channel 
      } 
     };    
     this.$uibModal.open(options).result 
      .then(updatedChannel => console.log(updatedChannel));    
    }; 

La boîte de dialogue s'ouvre comme prévu, mais quand je fais des changements, il est la mise à jour des QuoteTimes et QuoteTypes tableaux dans $sessionStorage (vu du console.log dans addChannel). Donc, chaque nouvel objet créé a le QuoteTimes et QuoteTypes du dernier objet que j'ai édité. Je suis complètement perplexe. Ma meilleure idée est que c'est une sorte de problème de chaîne de portée? Une idée de ce que je fais mal?

MISE À JOUR: J'ai pu le faire fonctionner comme prévu à l'aide JSON.parse(JSON.stringify(obj)); comme suit:

openPreferencesDialog = (obj, index) => {   
     var channel = JSON.parse(JSON.stringify(obj)); 
     var options: ng.ui.bootstrap.IModalSettings = { 
      templateUrl: 'app/form/templates/editChannelPreferences.html', 
      controller: 'EditDialogController', 
      controllerAs: '$ctrl', 
      resolve: { 
       channel:() => channel 
      } 
     };    
     this.$uibModal.open(options).result 
      .then(updatedChannel => 
      { 
       console.log(updatedChannel); 
       this.$sessionStorage.myChannels[index].QuoteTimes = updatedChannel.QuoteTimes; 
       this.$sessionStorage.myChannels[index].QuoteTypes = updatedChannel.QuoteTypes; 
       console.log(this.$sessionStorage.myChannels) 
      });    
    }; 

Quelqu'un peut-il expliquer pourquoi cela fonctionne?

Answer 1

Si les guillemets ... de l'objet de canal ne sont pas de type primitif, c'est un comportement normal. Parce qu'ils sont le type de référence que l'objet de canal édité en dernier et $ sessiontorage ont les mêmes références en mémoire.