Question

我正在尝试在将某些内容添加到本地存储时更新视图中的段落，在本例中是一个名为cart的数字数组。

在我的视图中，我有：

    <div class="words">{{user.cart || "thing"}}</div>

在我的控制器中，我有：

  .controller('LoginCtrl', function ($scope, $window, $location, UserFactory) {
       $scope.user = UserFactory.currentUser || {cart: $window.localStorage.getItem('cart')};
   }

如果我console.dir $scope.user它显示{cart: [44, 55]}（即正确的对象），但在我的视图中显示默认"thing"（如果我删除了{{ {1}}条件。

在视图中获取自动更新的正确方法是什么？

如果我添加：

||

我明白了：

$scope.$watch(function () {
  return JSON.parse($window.localStorage.getItem('cart'));
}, function (newcart) {
  $scope.user.cart = newcart;
});

和

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

有什么方法吗？

Answer 1

考虑到之前的cookie question，您遇到了XY问题。

检查使用Cart服务的可能性，它可以作为模型和单一事实来源。所以你可以肯定，一旦你调用了Cart setter方法，它的属性或getter方法总是反映cookie / localStorage / whateverStorage状态，所以你可以绑定它或者将它看作范围内的任何其他JS对象。

像js-data-angular (former angular-data)之类的东西可以阻止你重新发明全功能模型的轮子，但对于这样简单的任务来说似乎有些过分。

Angular如何在本地存储中发生更改时自动更新视图？

1 个答案: