javascript - 在 AngularJS 中更新 $localStorage 数据后，表中的值未更新

Question

我在 AngularJS 中有两个组件。一个组件 usersList 包含一个表

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

在页面加载时，此组件从 API 获取用户列表及其详细信息，并将其存储在 $localStorage 中。另一个是 editUserProfile 表单，其中的值被编辑和删除

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

基本上，我编辑用户详细信息并通过调用 API 删除用户，当编辑/删除成功时，我刷新 usersList 的 $localStorage 值，它是一个 JSON 对象。

在数据更新之前一切正常，但是更改没有反射(reflect)在 usersList 组件中。我这样做是为了保存对仅显示数据的 API 的调用。欢迎任何其他想法。

Answer 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中传递。

Pass $localStorage (or $sessionStorage) by reference to a hook under $scope in plain ol' JavaScript.

您的问题可能与 vm.$storage 分配有关。