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 对象。

在更新数据之前，一切都可以正常工作，但是更改不会反映在 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。

在普通的 JavaScript 中，通过引用 $scope 下的钩子来传递 $localStorage（或 $sessionStorage）。

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