Question

嗨我当前使用$ 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();
    });
}

Answer 1

当数据量很大时，请尝试使用$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);
    });
}

Answer 2

你最好的选择是某种懒惰的加载/分页。因此，如果它是一个非常大的列表，就像成千上万的列表一样，它甚至可能是一个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>

作为旁注，请尝试在模型名称中始终使用点。 $ scope.Something.list，用于eaxample。（“如果你没有一个圆点，你做错了”--Misko Hevery自己也说过了。）。

Answer 3

您可以使用$interval

来完成此操作

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

也不要使用$route.reload();。因为Angularjs支持 SPA （单页面应用程序）。如果您使用$route.reload();。每次页面都会加载，所以它不好。你只需要在区间内调用Service code。

Answer 4

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

类似的东西，下面的代码也会实现您的目标。我不知道你的CRUD js对象实例是什么，但只要它的Angular知道你不需要使用$ timeout。角度感知通常意味着非第三方API，但您可以使用$ q来帮助将第三方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;
        }
    }
}

$ route.reload（）;问题

4 个答案: