Question

我从MongoDB数据库中获取的 controller 中有一个非常大的JSON。这是它的结构（没有添加不相关的密钥）：

$scope.keyword; //ignore for now explained below
$scope.data = [
    {"key" : [
                 {"nested_key": //some value},
                 {"nested_key": //some value} //so on
             ]
    },
    {"key" : [
                 {"nested_key": //some value},
                 {"nested_key": //some value}
             ]
    },
    {"key" : [
                 {"nested_key": //some value},
                 {"nested_key": //some value}
             ]
    }
]

这是显示JSON的 HTML模板：

<div ng-repeat="outer in data">
    <div ng-repeat="inner in outer.key | keywordFilter: keyword">
        //print inner values
    </div>
</div>

此处，＆＃39;关键字＆＃39;保存将用于过滤内部ng重复循环的值。这是我的过滤器：

app.filter('keywordFilter', function() {
    return function(collection, keyword) {
        //Iteration over the entire collection. If keyword exists add the item to output
        return output;
    }
})

现在，正如预期的那样，每当我修改＆＃39; $ scope.keyword＆＃39;时，过滤器就会运行。单击按钮时会更新，如下所示：

HTML：

<input type="text" ng-model="temp" />
<button ng-click="updateKeyword()">

控制器：

$scope.updateKeyword = function() {
    $scope.keyword = $scope.temp;
}

问题：

由于数据的庞大规模，过滤过程大约需要10-15秒（有时浏览器会挂起！）然后，过滤器返回的新过滤数据会显示在屏幕上。

要求：

我想要做的是在这10-15秒内我想要显示一个加载器并在计算完成后显示新闻。我该如何实现这一目标？

我尝试了什么： 我想，一旦我点击过滤器按钮，我就需要等待ng-repeat循环完成，因此我尝试通过引用this thread.来尝试触发ng-repeat结束时的事件

但我发现，事件仅在第一次显示数据时触发，而不是在单击过滤器按钮并且关键字过滤器过滤数据时触发。

Answer 1

当角度处于摘要时，你可能只是使你的动作无效：

在您的控制器中：

function isInDigest(){
 $scope.$$phase ? true : false;
}


$scope.updateKeyword = function() {
 if(isInDigest()){ return; }
 $scope.keyword = $scope.temp;
}

并在您的模板中

<button ng-class="{'inactive':  isInDigest()}"  ng-click="updateKeyword()">

Answer 2

只需使用angular $timeout，它会在角度操作并且浏览器渲染DOM后运行它作为参数接收的函数。

有关详细信息，我建议this和this stackoverflow answer讨论与$ timeout和$ evalAsync相关的一些时间，以及一些非常权威的参考。

但我同意estus的评论：这可能不是你正在寻找的架构，在控制器中使用javascript或指令为ng-repeat留下较少的工作，或者如果你的数据是如此，则使用延迟加载机制大。

AngularJS：嵌套ng-repeat与过滤器完成后的触发事件

2 个答案: