Question

我有一个服务，我在其中调用$compile来编译我的模板。 JS中的函数一个接一个地执行。但是，为了得到我的最终HTML，我必须将html()置于超时回调中。否则，我只使用{{ placeholders }}获取模板。问题是为什么我需要在这里使用超时？这是我的代码：

var newScope = $rootScope.$new(true);
angular.extend(newScope, data);
var compiled = $compile(template);
var linked = compiled(newScope);

$timeout(function () {
  def.resolve(linked.html());
});

Answer 1

不，$ compile不是异步的。由于浏览器的性质以及JavaScript和DOM之间的关系，调用$ timeout是必要的。 $ timeout允许更新DOM，以便您对.html（）的调用实际上有 html返回。

您的示例正确使用$ compile和$ timeout。

一些注意事项：

$ timeout已经返回一个使用传递函数的返回值解析的promise，所以你可以这样做：

return $timeout(function(){
    return linked.html();
});

正如您所知，模板的最外层（根）元素被抛弃，因为.html（）返回该元素的innerHTML。如果你需要保留那个根元素，你可以先将它包装在div中，如下所示：

return $timeout(function(){
    return angular.element('<div/>').append(linked).html();
});

完整示例：

var $scope = angular.extend($rootScope.$new(true), data);
var template = angular.element($templateCache.get(templateName));

$compile(template)($scope);

return $timeout(function(){
    return angular.element('<div/>').append(template).html();
});

是angular的编译函数async？

1 个答案: