viewmodelと$ sessionStorageの間でデータが奇妙に同期しています

Question

私は$sessionStorageにオブジェクトのリストを保存しています。次に、私のコントローラーの1つでは、そのリストの価値を得てページに表示し、ユーザーはそのアイテムを削除できます。

問題は、ユーザーがビューモデルからそのリストの1つの項目を削除すると、望ましくない$sessionStorageからも削除されるという問題です。ここで

は私のコントローラのコード

(function() { 
    'use strict'; 

    myModule.controller('infoCollecteArticlesController', ['$scope', '$rootScope', '$location', '$sessionStorage', 'global_factory', 'infoCollecteArticlesFactory', 
    function ($scope, $rootScope, $location, $sessionStorage, global_factory, infoCollecteArticlesFactory) { 
    var vm = this; 

    /* 
    * PUBLIC FUNCTIONS 
    */ 

    // Delete a URL from the vm 
    vm.deleteUrl = function(index) { 
     vm.web_urls.splice(index, 1); 
    } 

    // Watch sessionStorage 
    $scope.$watch(function() { 
     return $sessionStorage.currentCommuneData; 
    }, function (newVal, oldVal) { 
     if (newVal) { 
      vm.web_urls = newVal.web_information.web_urls; 
      vm.filters = newVal.web_information.stop_list; 
     } 
     else { 
      window.location.replace("test.html"); 
     } 
    }, true); 
} 
]); 
})(); 

Answer 1

vm.web_urls = newVal.web_information.web_urls;

この行は、同じメモリ位置を持つsessionStorage変数のオブジェクトを直接参照します。

したがって、vm.web_urlsからオブジェクトを削除しても、sessionStorageのデータは削除されています。 `;

代わり

$scope.$watch(function() { 
     return $sessionStorage.currentCommuneData; 
    }, function (newVal, oldVal) { 
     if (newVal) { 
      vm.web_urls = angular.copy(newVal.web_information.web_urls); 
      vm.filters = angular.copy(newVal.web_information.stop_list); 
     } 
     else { 
      window.location.replace("test.html"); 
     } 
    }, true); 

Answer 2

バインディングが切断されるように、任意の

// Delete a URL from the vm 
    vm.deleteUrl = function(index) { 
     vm.web_urls = angular.copy(vm.web_urls).splice(index, 1); 
    } 

はまた、あなたがnewValにをコピーする可能性がある場合バインディングを切断するweb_urlsのコピーを作成している

vm.web_urls = angular.copy(newVal.web_information.web_urls);