Question

我正在使用AngularJS，ui-router和$ resource用于RESTful webservices。

单击html视图中的按钮，调用下面的函数，即$ scope.login（）。因此，调用REST服务（通过$ resource）并在用户/传递正确的情况下返回用户，

$scope.login = function() {
myfactory.get({
        email: $scope.user.email,
        password: $scope.user.password
    },function(user) {
        accessmgr.grantAccess(user);      //Line of interest - loi1
        $state.go('app.dashboard-v1');    //Line of interest2 - loi2
    }, function(x) {
        if (x.status == 401)
            $scope.authError = 'Email or Password not right';
        else
            $scope.authError = 'Server Error! Are you connected to internet?';
    });
}

如果上面成功执行，则调用另一个工厂函数（上面的loi1）将用户实例存储在$ localStorage中，如下所示;

myapp.factory('accessmgr', function($localStorage) {
    //var User = {};
    return {grantAccess: function(usr) {
            $localStorage.user = usr;
        }
    }});

和ui-router $ scope.go（...）将用户带到仪表板。

问题： 有时 $ state.go（...）在accessmgr.grantAccess（...）执行之前执行，因为新状态从$ localStorage读取尚未写入的用户。手动重新加载页面可以解决问题。

任何帮助都会非常感激。

Answer 1

localStorage本身以同步方式工作，但ngStorage的$ localstorage并不是。后者旨在与范围和is tied to Angular digest cycles结合使用。我猜是

myapp.factory('accessmgr', function($localStorage) {
    return {grantAccess: function(usr) {
            $localStorage.user = usr;
            $localStorage.$apply();
        }
    }});

可能有所帮助。当像这样使用时，ngStorage并没有真正闪耀，可能更好的JS通用库如store.js。

一个好的选择是使用充当单一事实来源的模型并将数据转储到localStorage。根据项目的规模，js-data-angular可以被认为是一个可靠的解决方案。

Answer 2

ngStorage的$ localStorage不能在不使用观察者的情况下直接引用（不建议按照here，或者它可以作为引用传递给$ scope，如推荐的方法{{3 }}

对我来说，我通过工厂使用$ localStorage并将其绑定到rootScope，如下所示;

$rootScope.$storage = $localStorage;

因此

myapp.factory('accessmgr', function($localStorage) {
  $rootScope.$storage = $localStorage;
  return {
    grantAccess: function(usr) {
        $rootScope.$storage.user = usr;
      },
    getUser: function() {
        return $rootScope.$storage.user;
      }
  }});

AngularJS $ state.go在前一个语句执行完成之前执行

2 个答案: