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对象“subject”中是否已有任何主题。如果是，则将新主题添加到主题数组中并更新LocalStorage。如果没有，则创建名为“subject”的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位于上面的更新问题

中

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

1 个答案: