异步API循环调用导致双层模态框数据更新异常问题

你这碰到的是异步操作顺序和事件广播时机的典型坑，咱们一步步拆解搞定它：

问题根源拆解 #

• 把$rootScope.$broadcast('fileSaveUpdate')放在API成功回调里：循环里的每个API调用都是异步的，每个请求成功都会触发一次广播，底部模态框的监听事件就会重复执行多次，每次都重新赋值数据，自然就导致行重复显示了。
• 把广播直接丢循环外：循环是同步跑完的，但所有API请求这时都还在pending状态，循环刚结束就广播的话，底部模态框去更新数据时，新上传的文件数据根本还没写入，当然看不到任何更新。

正确解决方案：用Promise等待所有异步操作完成 #

AngularJS里封装的HTTP请求（比如你这里的uploadFiles.saveFile）返回的都是Promise对象，咱们可以把所有上传请求的Promise收集起来，用$q.all()等待全部请求完成后，再统一执行关闭模态框和广播的操作。

修改后的顶部模态框控制器代码如下：

app.controller('fileSaveSectionCtrl', function ($scope, $rootScope, $modalInstance, $q) { 
    $scope.uploadFiles = function () { 
        // 收集所有上传请求的Promise
        var uploadPromises = [];
        
        // 推荐用angular.forEach避免闭包陷阱，也兼容循环逻辑
        angular.forEach(selectedFiles, function(file) {
            // 这里根据当前file生成对应的payload
            var payload = /* 你的payload生成逻辑 */;
            var requestPromise = uploadFiles.saveFile(payload)
                .success(function(response) { 
                    // 单文件上传成功后的单独处理（比如记录日志）
                })
                .error(function(data, status) { 
                    // 单文件上传失败的错误处理
                });
            uploadPromises.push(requestPromise);
        });

        // 等所有上传请求都完成后，再执行后续操作
        $q.all(uploadPromises).then(function() {
            $modalInstance.close();
            // 只广播一次，确保底部模态框只更新一次数据
            $rootScope.$broadcast('fileSaveUpdate');
        }).catch(function(error) {
            // 所有上传请求中出现错误时的统一处理（比如提示用户上传失败）
        });
    } 
})

额外优化小建议 #

1. 尽量避免全局广播：可以考虑用AngularJS的自定义服务来共享状态或传递数据，比$rootScope广播更可控，也更符合模块化开发的思路。
2. 检查底部模态框的数据更新逻辑：确保updateFileSaveData()是重新获取最新的完整数据，而不是在原有数据上追加，从源头避免数据重复。
3. 警惕循环闭包陷阱：原来的for循环可能会因为闭包问题导致每次上传的payload都是最后一个文件的数据，用angular.forEach或者立即执行函数可以避开这个坑。

这样修改后，所有文件上传完成后才会触发一次广播，底部模态框只会更新一次数据，既不会出现重复行，也不会提前执行更新导致看不到效果。

内容的提问来源于stack exchange，提问作者sjain