Question

在我的应用程序中，我从数据库中检索一些字段，并在用户登录时在本地存储中设置值。

然后从本地存储中检索以将其显示给用户：

if (localStorage.getItem('a') != undefined) {
            $rootScope.a = localStorage.getItem('a');
    }

所以这个工作正常。但问题是当数据库中的值更新并且用户在注销后登录时，即使本地存储具有正确的值（即最近更新的值），第一次它将显示范围变量的旧值刚刚更新了。

我按照不同帖子的建议尝试了$apply()和$digest()：

$timeout( function () {
        $scope.$apply( function () {
            $rootScope.a = localStorage.getItem('a');
        });
    });

但它没有成功。它始终显示范围的旧值。它只会在重新加载页面一次后显示新值。

P.S。 - 即使登录和退出，我的应用程序中的网页也不会在任何模块中重新加载。

Answer 1

您可以尝试观察范围变量，如下所示：

$rootScope.$watch('a', function (newVal, oldVal){
 if newVal != oldVal
   $rootScope.a = newVal;
}

要尝试的其他方法是将'a'从字符串更改为对象，因为我认为使用对象引用角度监视值。

这是$ watch

的一些有用参考

http://www.learn-angular.org/#!/lessons/watch

https://www.bennadel.com/blog/2852-understanding-how-to-use-scope-watch-with-controller-as-in-angularjs.htm

希望它能以任何方式帮助

修改

好的，我测试了它。如果在数据刷新时刷新范围，则不需要观察$ apply。

这就是我所做的：

(function() { angular.module('myapp', []).controller('myctrl', [ '$scope', function($scope) { var data, getDataFromLocalStorage; console.log("scope is ", $scope); getDataFromLocalStorage = function() { return JSON.parse(localStorage.getItem('data')); }; data = [ { id: 1, text: "test1" }, { id: 2, text: "test2" }, { id: 3, text: "test3" } ]; localStorage.setItem('data', JSON.stringify(data)); $scope.myData = getDataFromLocalStorage(); return $scope.changeData = function() { var dataNew; dataNew = [ { id: 4, text: 'text4' }, { id: 5, text: 'text5' }, { id: 6, text: 'text6' } ]; localStorage.setItem('data', JSON.stringify(dataNew)); return $scope.myData = getDataFromLocalStorage(); }; } ]); }).call(this);

https://codepen.io/NickHG/pen/rzvGGx?editors=1010

AngularJs - 即使更新了范围，也会保持旧的范围值

1 个答案: