2017-09-21 10 views
1

AngularJS에 두 개의 구성 요소가 있습니다. 하나 개의 구성 요소 usersList이 구성 요소는 $ 로컬 스토리지의 API 및 저장합니다에서 자신의 세부 사항을 가진 사용자의 목록을 가져 오는 테이블 페이지로드

<table> 
    <tbody> 
    <tr ng-repeat="..."><!--Contains code to repeat the entries in usersList localstorage object--></tr> 
    </tbody> 
</table> 

가 포함되어 있습니다. 다른 는 값이, 나는 사용자 정보를 편집하고 API를 호출하여 사용자를 삭제하고 편집하고 그래서 기본적으로

app.component("editUserProfile", { 
    ... 
    controller: function($localStorage, ...) { 
    vm.$storage = $localStorage; 
    // Do other things 
    // Some event (edit) is successful, update the userslist in $localStorage 
    vm.$storage.usersList = response 
    } 
}) 

을 삭제 한 형태 editUserProfile이며, 성공적인 편집/일 삭제할 때, 나는 새로 고침 JSON 객체 인 usersList의 $ localStorage 값.

사물은 데이터 업데이트까지 완전히 작동하지만 변경 사항은 usersList 구성 요소에 반영되지 않습니다. 데이터를 표시하기위한 API 호출을 절약하기 위해이 작업을 수행하고 있습니다. 다른 아이디어는 환영합니다.

+0

$ storage 및 $ localstorage는 무엇입니까? – Zooly

+0

ngStorage를 사용하고 있습니다. $ storage 및 $ localStorage는 ngStorage와 관련이 있습니다. –

+0

그 다음 언급하는 것을 잊지 마세요 :) – Zooly

답변

1

이 부분을 참조하십시오. Plunkr

var app = angular.module('app', ['ngStorage']); 

app.controller('mainCtrl', function($scope, $localStorage){ 
    $scope.$storage = $localStorage; 

    $scope.$storage.entity = []; 

    $scope.add = function(){ 
    $scope.$storage.entity.push('New entry'); 
    } 

}); 

$localStorage$scope에 전달해야 것으로 보인다.

$ scope 아래의 후크를 참조하여 $ localStorage (또는 $ sessionStorage)를 JavaScript로 전달하십시오.

문제가 vm.$storage으로되어있을 수 있습니다.

+0

이것은 작동합니다! 하지만 ngStorage 값에 $ watch를 사용하여이 문제를 극복했습니다. 즉 usersList –