更改 LocalStorage 时，AngularJS ng-repeat 不会更新（使用 store.js）

Question

在我看来，我想显示保存在 LocalStorage 元素中的项目列表（主题名称）。我在视图中的代码如下所示：

<div class="list">
  <a class="item" href="#" ng-repeat="subject in subjects">
    {{subject.name}}
  </a>
</div>

我的控制器如下所示：

.controller('SubjectCtrl', function ( $scope ) {

  $scope.subjects = store.get('subjects');

  $scope.submit = function() {
    if (store.get('subjects') != null) {
      var existing = store.get('subjects')
      var subject = [ { name: $scope.form.name, weighting: $scope.form.weighting, grades: [] } ]
      subject.add(existing)
      store.set('subjects', subject)
    }
    else {
      var subject = [ { name: $scope.form.name, weighting: $scope.form.weighting, grades: [] } ]
      store.set('subjects', subject)
    }
  };
})

$scope.subjects 变量使用 Store.js（https://github.com/marcuswestin/store.js，一种简化 LocalStorage 访问的插件）从 LocalStorage 中获取项目并将它们提供给视图。

当用户提交表单以添加新主题时，会触发下面的代码。该表单包含两个输入：名称和权重。提交表单时，代码会检查 LocalStorage 对象“主题”中是否已经存在任何主题。如果是，则将新主题添加到主题数组中并更新 LocalStorage。如果没有，则会创建一个名为“subjects”的 LocalStorage 对象并添加新的主题。

上面的代码按预期工作，但我的大问题是，如果将新主题添加到 LocalStorage 内的数组中，Angular 不会更新视图，我必须重新加载页面手动查看列表中出现的新主题。

经过一番研究，我了解到问题可能是因为 LocalStorage 对象在 AngularJS 范围之外更新。但我是 Angular 初学者，不知道在对象发生变化时立即通知 Angular 的最佳方式是什么。

感谢您的帮助！

-- 更新--

我已从 store.js（不能与 angular 一起使用）切换到 ngStorage (https://github.com/gsklee/ngStorage)。如果我使用 ngStorage 发布更新的控制器代码，也许对某人有帮助：

.controller('SubjectCtrl', function ( $scope, $localStorage ) {
  $scope.$localStorage = $localStorage.$default({
    subjects: []
  });

  $scope.subjects = $localStorage.subjects;

  $scope.submit = function() {
    $localStorage.subjects.push({ name: $scope.form.name, weighting:  $scope.form.weighting, grades: [] });
  };
})

Answer 1

您的代码中有几处可以改进——最重要的是：您永远不会通知$scope有关更改。 试试这个，如果有帮助，请告诉我：

.controller('SubjectCtrl', function ( $scope ) {
    $scope.subjects = store.get('subjects');
    if($scope.subjects == null) {
        $scope.subjects = [];
    }

    $scope.submit = function() {
        $scope.subjects.push({ name: $scope.form.name, weighting: $scope.form.weighting, grades: [] });
        store.set('subjects', $scope.subjects)
    };
})

-- 更新--

找到的解决方案 OP 在上面的更新问题中