Javascript AngularJS：完成与筛选器的嵌套ng重复后触发事件

我的控制器中有一个非常大的JSON，它是从MongoDB数据库获取的。以下是它的结构（没有添加不相关的键）：

下面是我的HTML模板显示JSON：

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

现在，正如预期的那样，只要我修改“$scope.keyword”，过滤器就会运行。当我单击按钮时，它会更新，如下所示：

HTML:

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

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

问题：

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

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

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

要求：

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

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

我想做的是，在这10-15秒内，我想显示一个加载器，在计算完成后，显示新闻。我如何做到这一点

我的尝试： 我想，一旦我点击filter按钮，我需要等待ng repeat循环完成，因此我尝试在ng repeat完成时通过引用触发一个事件

---

但我发现，只有在第一次显示数据时才会触发事件，而不是在单击筛选按钮并通过关键字筛选筛选数据时触发事件。

当angular处于摘要中时，您可以简单地使您的操作无效：

在控制器中：

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


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

在你的模板中

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

---

当angular在摘要中时，您可以简单地使您的操作无效：

在控制器中：

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


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

在你的模板中

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

只需使用angular，它在angular操作并由浏览器呈现DOM后，运行作为参数接收的函数

关于更多信息，我推荐并讨论与$timeout和$evalAsync相关的一些计时，并提供一些非常权威的参考资料

但我同意estus的评论：这可能不是您想要的架构，在控制器中使用javascript或指令来减少ng repeat的工作量，或者如果您的数据太大，则使用延迟加载机制。

只需使用angular，在angular操作并浏览器呈现DOM后，它将运行作为参数接收的函数

关于更多信息，我推荐并讨论与$timeout和$evalAsync相关的一些计时，并提供一些非常权威的参考资料

---

但我同意estus的评论：这可能不是您想要的体系结构，在控制器中使用javascript或指令来减少ng repeat的工作量，或者如果您的数据太大，则使用延迟加载机制。

嵌套ng repeat是一种资源浪费。解决方法是使用JS函数遍历

数据

，并使用自定义指令而不是“html编程”。嵌套的ng重复是一种资源浪费。修复方法是使用JS函数遍历

数据

，并使用自定义指令而不是“html编程”。