AngularJS：使用过滤器的嵌套 ng-repeat 完成后触发事件答案

【问题标题】：AngularJS: trigger event after nested ng-repeat with filter is completeAngularJS：使用过滤器的嵌套 ng-repeat 完成后触发事件
【发布时间】：2015-07-14 09:41:39
【问题描述】：

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

$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>

这里，'keyword' 保存将用于过滤内部 ng-repeat 循环的值。这是我的过滤器：

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

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

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 完成时触发一个事件

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

【问题讨论】：

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

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案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()">

【讨论】：

【解决方案2】：

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

如需了解更多信息，我建议this 和this stackoverflow answer 讨论与$timeout 和$evalAsync 相关的一些时间安排，并提供一些非常权威的参考资料。

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

【讨论】：