Angular JS：刷新页面时，所有$scope都丢失了

Question

在刷新页面时，我在使用 angularJS 时遇到了几个问题。用户登录成功后，如果刷新页面，所有 $scope 都会丢失。用户必须再次登录然后注销。我遇到的另一个问题是当用户注册和事件时，他们可以查看用户仪表板中的所有事件。在用户仪表板中，他们将事件放在带有“删除”按钮的“卡片”中。查看“下面的事件卡代码”

** 下面的事件卡**

<div class="container-fluid">
 <div class="row">
  <div class="col m3 l3" ng-repeat="items in userEvents">
   <div class="card">
    <div class="card-image">
      <img src="/images/uploads/{{items.eventImage}}"/>
      <span class="card-title">{{ items.title }}</span>
    </div>
    <div class="card-content">
      <p>{{ items.description }}</p>
    </div>
    <div class="card-action"> <!--BREAKING STUFF HERE!-->
      <a class="waves-effect waves-light btn" ng     click="updateEvent(items._id)" ui-sref="updateDash">Edit</a>
      <a class="waves-effect waves-light btn" ng-click="deleteEvent(items._id)">Delete</a>
    </div>
  </div>
</div>

并且 ng-click="deleteEvent(items.id) 由下面的代码触发。

** dashCtrl.js **

angular.module("socialApp")

.controller('DashCtrl', function($scope, dashFactory, infoFactory, $rootScope,      $http, $window) {
 $scope.userEvents = {};
 $scope.id = $rootScope.loggedUser;
 //populates the page with events linked to userID
 dashFactory.getUserEvents($scope.id)
 .then(function(events) {
  $scope.userEvents = events;
  console.log("1st", $scope.userEvents);
  // console.log(events);
});

//deletes event by eventId
$scope.deleteEvent = function(id){
 $scope.eventId = id;
 //console.log($scope.eventId);
 $http.delete('events/deleteEvent/'+id)
  .then(function(results){
    console.log(results);
    $window.location.reload();
  })
}

我放置了 $window.location.reload();刷新页面，以便已删除的“事件卡”不会显示在页面上，但页面似乎破坏了事件卡并且用户 $scope 丢失了，而不是发生这种情况。我的导航栏按钮变为登录和注册按钮，就好像没有用户登录一样。

请帮忙！！

Answer 1

我不知道你如何实现你的后端，所以这个解决方案只是一个一般的猜测。对于用户登录，您不应将用户信息保存在 $scope.user 中，而应使用 session 来保存您想要在刷新期间保留的任何信息。

例如创建如下服务：

angular.module('...')
.service('SessionService', function($window) {
    var service = this;
    var sessionStorage = $window.sessionStorage;

    service.get = function(key) {
        return sessionStorage.getItem(key);
    };

    service.set = function(key, value) {
        sessionStorage.setItem(key, value);
    };

    service.unset = function(key) {
        sessionStorage.removeItem(key);
    };
});

在您的控制器中：

angular.module('...')
.controller("LoginCtrl", function($scope, SessionService) {
   $scope.logIn = function(credentials) {
      $http.post('/someUrl', {credentials: credentials}).then(
         function(res) {
            SessionService.set("userId", res.data.id);
            // prefer SessionService.set("userToken", res.data.userToken);     
      });
   }

});

然后当你检查用户是否登录时，你只需要检查

SessionService.get("userId") is undefined or not

你可以把它放在另一个通常叫做Authentication的服务中

再次，由于我不知道您的身份验证在您的后端是如何工作的，所以我不知道您需要在前端保留哪些数据，这样即使您刷新页面后，您也可以使用保存在会话存储再次从后端查询正确的当前登录用户。

刷新页面后，您的 Angular 应用将恢复到初始状态，因此想法很简单：

1. 在他们登录后，您可以保存某种可以识别用户的令牌，然后在刷新页面后，您可以使用该令牌向您的后端发出请求并获取已登录的用户。用户信息不会丢失。
2. 您可以选择将完整的用户信息保存在会话中，这样您就不需要再次向后端发出请求来获取您的用户，并且您可以在他们注销时删除会话中的用户信息。李>

Answer 2

重新加载页面将消除所有当前范围，因为您实际上是将页面重置回其初始状态。

如果您想在不重置 .then 范围的情况下删除数据，请调用从 userEvents 列表中删除项目。

Answer 3

如果刷新页面，所有 $scope 都会丢失。

范围在刷新时重新初始化

而不是重新加载$window.location.reload(); 拼接 userEvents（期望 userEvents[]）

$scope.deleteEvent = function(id, index){
    $scope.eventId = id;

    $http
        .delete('events/deleteEvent/'+id)
        .then(function(results){
            $window.location.reload();
            $scope.userEvents.splice(index, 1)
        });
}

跟踪ng-repeat="items in userEvents track by $index"中的索引 然后在ng-click="deleteEvent(items._id, $index)"中添加$index as parameter