$route.reload(); Issue

$route.reload(); Issue

本文关键字：Issue route reload      更新时间：2023-09-26

Hi-im currenty每次更新数据库时都使用$route.reload刷新控制器的内容。问题是，当更新大量数据时，每次我更新数据库并运行$route.reload时，我的浏览器都会失去向上或向下滚动的功能，它可以很好地处理较小的数据列表。

下面是我的代码示例

$scope.Undone = function(id){
    $scope.index =  $scope.GetID ;
    CRUD.put('/UndoJda/'+$scope.index).then(function(response){         
            toastr.info('Jda has been activated.', 'Information');
    $route.reload();
    });
}

您最好的选择是某种惰性加载/分页。因此，如果它是一个非常大的列表，比如成千上万，它甚至可能是DOM渲染问题。此外，如果不是这样的话，您应该尝试使用AngularJS的绑定一次（自1.3起可用），以及在模板中不为作用域上的每个对象创建观察程序的跟踪。假设你使用的是ngRepeat，让我们这样说：

...<ul>
    <li ng-repeat="item in Items">
      <b>{{item.name}}</b>
    </li>
   </ul>

如果数据不经常更新，请将其更改为以下内容：

...<ul>
    <li ng-repeat="item in Items track by $index">
      <b>{{::item.name}}</b>
    </li>
   </ul>

顺便说一句，试着在你的模特的名字中总是有一个点$范围例如，Something.list。（"如果你没有一个点，你就做错了"-Misko Hevery自己也这么说。）.

当数据巨大时，尝试使用$timeout并重新加载页面。

这将阻止非常快速的刷新，并使您的页面保持响应能力。

$scope.Undone = function(id){
    $scope.index =  $scope.GetID ;
    CRUD.put('/UndoJda/'+$scope.index).then(function(response){         
        toastr.info('Jda has been activated.', 'Information');
        $timeout(function() {
          $route.reload();
        }, 200);
    });
}

您可以使用$interval

 $interval(function() {
     CRUD.put('/UndoJda/'+$scope.index).then(function(response){         
        toastr.info('Jda has been activated.', 'Information');  
        // Update scope variable 
      });
    }, 2000);

并且也不使用CCD_ 3。因为Angularjs支持SPA（单页应用程序）。如果使用CCD_ 4。每次页面都会加载，所以这不好。你只需要在区间内调用Service code。

首先，我建议删除$route.reload（）的用法，您的用例不需要视图重新实例化控制器。相反，您应该更新$scope变量，该变量包含您在视图中呈现的实体的集合。您还需要考虑添加用户体验功能，如加载指示器，以通知用户有关长时间运行的任务。

类似的东西，下面的代码将实现你想要的。我不知道你的CRUDjs对象实例是什么，但只要它有Angular意识，你就不需要使用$timeout。Angular感知通常意味着非第三方API，但您可以使用$q来帮助向Angular公开第三方ajax结果。

// angular module.controller()
function Controller($scope, EntityService) {
    $scope.entityCollection = [];
    $scope.loadingData = false; // used for loading indicator 
    // Something will initialize the entity collection
    // this is however your already getting the entity collection
    function initController() {
        $scope.refreshCollection();
    }
    initController();
    $scope.refreshCollection = function() {
        $scope.loadingData = true;
        EntityService.getEntitites().then(function(resp) {
            $scope.entityCollection = resp;
            $scope.loadingData = false;
        });
    }
    $scope.Undone = function(id) {
        $scope.index =  $scope.GetID ;
        CRUD.put('/UndoJda/' + $scope.index).then(function(response){         
            toastr.info('Jda has been activated.', 'Information');
            $scope.refreshCollection();
        });
    }
}
// angular module.factory()
function EntityService($q, $http) {
    return {
        getEntitites: function() {
            var deferred = $q.defer();
            $http.post('/some/service/endpoint').then(function(resp) {
                deferred.resolve(resp);
            });
            return deferred.promise;
        }
    }
}
相关文章：