javascript - 当更改 LocalStorage 时，AngularJS ng-repeat 不会更新(使用 store.js)

Question

在我看来，我想显示保存在 LocalStorage 元素中的项目(主题名称)列表。我在 View 中的代码如下所示:

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

我的 Controller 看起来像这样:

.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 获取项目并将它们提供给 View 。

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

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

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

感谢您的帮助!

-- 更新--

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

.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 找到的解决方案在上面的更新问题中