如何在两个angular.forEach执行完成后再调用foo()函数？

嘿，作为新手不用慌，我们一步步来解决这个问题～

首先要明确：angular.forEach是同步执行的遍历方法，而且$compile本身也是同步完成编译的。所以你现在的代码其实已经是先执行完第一个angular.forEach的所有循环，再执行第二个，最后才调用foo()的。不过如果是你担心某些隐藏的异步操作（比如编译后的元素依赖异步数据加载），或者想让代码逻辑更清晰可控，我们可以用AngularJS的$q服务来做更严谨的异步管理。

情况1：所有操作都是同步的（最常见场景） #

如果你的values1和values2里的元素编译都是同步完成的，那你当前的代码逻辑是没问题的，不过可以优化得更简洁一点：

// 合并两个遍历，减少重复代码
angular.forEach([...values1, ...values2], function(value, key){
  $compile(value)($scope);
});
// 此时所有编译操作已经全部执行完毕，调用foo()
foo();

这样写法更干净，而且执行顺序完全符合你的需求——所有编译完成后才触发foo()。

情况2：存在异步操作（比如编译后依赖异步数据） #

如果你的编译过程中涉及异步操作（比如某些指令内部有$http请求或者$timeout），那我们需要用$q来追踪所有异步任务的完成状态：

// 记得在你的控制器/指令中注入$q服务
var promises = [];

// 收集第一个遍历的异步任务Promise
angular.forEach(values1, function(value, key){
  var compiledElement = $compile(value)($scope);
  // 假设每个编译后的元素有一个异步初始化方法，返回Promise
  if (compiledElement.scope().asyncInit) {
    promises.push(compiledElement.scope().asyncInit());
  }
});

// 收集第二个遍历的异步任务Promise
angular.forEach(values2, function(value, key){
  var compiledElement = $compile(value)($scope);
  if (compiledElement.scope().asyncInit) {
    promises.push(compiledElement.scope().asyncInit());
  }
});

// 等待所有异步任务完成后执行foo()
$q.all(promises).then(function(){
  foo();
});

这里的核心是用$q.all()监听所有异步任务的Promise，只有当所有Promise都成功完成后，才会执行then回调里的foo()。

最后再提醒一下：如果是普通的同步编译场景，第一种写法就足够啦，不用额外引入Promise～

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