Question

我正在建立一个小型AngularJS项目，我遇到了一个问题，我想问你们。我使用角度本地存储模块将来自我的API的一些数据存储到浏览器的本地存储中。在我的一个控制器中，我将此数据分配给$ scope对象中的变量，并尝试在视图中呈现它，如下所示：

控制器：

angular.module('Dashboard')

.controller('DashboardController',
    ['$scope', '$rootScope', 'localStorageService',
        function ($scope, $rootScope, localStorageService) {
            $scope.userData = localStorageService.get('userData');
        }]);

观点：

<div class="row">
<h4>Welcome to your dashboard <strong>{{userData.personalUserInfo.name}}</strong>!</h4>

当我登录应用程序时（即从API获取数据并通过键'userData'存储在本地存储中），视图不完整，我只得到“欢迎使用您的信息中心！”那里没有名字。当我进入开发控制台并查看浏览器的localStorage时，条目“userData”就在那里，它只是没有渲染。然后，当我点击F5并刷新页面时，会出现名称。

您是否有任何想法为什么会这样做以及可以采取哪些措施来解决这个问题？干杯！

Answer 1

您必须使用$scope.$watch，如下所示：

$scope.$watch(function() {
  return localStorageService.get('userData');
}, function(newVal, oldVal) {
  if (newVal !== oldVal)
    $scope.userData = newVal;
})

$scope.$watch，每次更改第一个function的返回值时，都会执行第二个function。

除非页面刷新，否则AngularJS本地存储服务中的数据不会呈现

1 个答案: