Seeking assistance from the community. I am utilizing ngStorage to store some global variables:
//Global Controller
saveGlobalSettings = () => {
this.$sessionStorage.QuoteTimes = this.quoteTimes;
this.$sessionStorage.QuoteTypes = this.quoteTypes;
};
Within another controller method, I am creating objects that incorporate some of these global variables as properties:
// 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);
};
Subsequently, I am using ng-repeat to present the objects in myChannels on the browser. Upon clicking an object, it is passed to the openDialog() method:
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));
};
While the dialog opens correctly, any modifications made are updating the QuoteTimes and QuoteTypes arrays in $sessionStorage (as indicated by the console.log within addChannel). Consequently, each new object inherits the previous object's QuoteTimes and QuoteTypes. I am perplexed by this issue. Could it be related to a scope chain problem? Any insights on what might be going wrong?
UPDATE: By using JSON.parse(JSON.stringify(obj)); as shown below, I managed to achieve the desired behavior:
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)
});
};
Can someone shed light on why this approach works?