Question

我有一个长时间运行的任务，我想显示一个简单的div来提醒用户并让他们等待。

我有一个自定义过滤器需要大约10秒才能应用。这大约是初始页面加载的三倍，所以单独这是一个问题，但如果我能显示一个警告他们任务在内存中工作的div，我的用户会在某种程度上感到满意。

我正在使用ng-show =＆＃34; filteringTasks＆＃34;变量，但它没有显示div，因为似乎Angular正在忙于过滤过程而用户界面没有得到更新。

<div ng-show="filteringTasks">Filtering Tasks...Please wait </div>

首页加载时会加载所有任务，因此＆＃34;数据＆＃34;在这种情况下，来自数据库的所有400多条记录。这里是ng-repeat的html：

<div ng-repeat="task in filteredTasks = 
    ( data | filter:searchText | statusFilter:statusOptions
    orderBy:predicate:reverse ) track by task.id " 
    on-finish-render="ngRepeatFinished">

该指令＆＃34; ngRepeatFinished＆＃34; ng-repeat结束时触发。这工作正常。

过滤器正在为每个任务查找五个状态（过滤器数组）中的一个或多个。如果task.status与请求的状态匹配且过滤器为true，则任务将添加到结果中。

这是过滤器：

ppApp.filter('statusFilter', [ function ( $filter ) {
return function( input, filter ) {
    if ( input ) {
        var result = [];
        angular.forEach(input, function ( task ) {
            angular.forEach( filter, function( ans, status ) {
                if ( task.status == status && ans ) {
                    result.push( task );
                }
            });
        });
        return result;
        }
    };
}]);

最后，为了提示用户，我将其添加到控制器：

$scope.initialPageLoad=true; 
$scope.$watch("statusOptions['incomplete']", function() {
    if ( $scope.initialPageLoad ) {
        $scope.initialPageLoad = false;
    } else {
        alert('this may take a while');
        $scope.filteringTasks=true;
    }
});

概念是警告用户执行长时间运行的任务并通过设置$ scope.filteringTasks = true来显示div;一种想法是实现无限滚动指令并在结束时显示结果。另一个是有一些进度条，但如果界面甚至不显示简单的div，那似乎没用！我真的不知道为什么过滤器需要这么长时间才能应用，但代码会正常启动。

如何可靠地让用户知道ng-repeat在幕后工作？

Answer 1

解决此问题的一种方法是创建两个html文件：一个使用ng-show，另一个使用ng-repeat。然后使用角度stateProvider和Angular ui-route-provider加载两个html文件。所以最初你的第一个html将完全加载，然后，你的ui-router将加载第二个html。这也可以在用户过滤器操作上完成。

注意：这不是这些提供程序的主要目的，但可以执行此任务。

在ng-repeat工作时显示过滤div

1 个答案: