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

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

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

Answer 2

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

例如创建如下服务：


namevendors          A           B                C
unique_id

46                   4           0                0

58                   2           0                0

362                  1           0                0

545                  2           0                0

638                  2           0                0

745                  2           0                0

1014                 2           0                0

1114                 4           0                0

1254                 1           0                0

1354                 1           0                0

2089                 4           0                0

2472                 4           1                0

2949                 2           0                0

3049                 1           0                1

在您的控制器中：


name vendors A B C
[2.2857142857142856 0.07142857142857142 0.07142857142857142]

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

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); }); } });

的其他服务中

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

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

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

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"中的索引然后在$index as parameter

中添加ng-click="deleteEvent(items._id, $index)"

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

3 个答案: