AngularJS:如何知道 $compile 何时完成? [英] AngularJS: how to know when the $compile has finished?

问题描述

http://plnkr.co/edit/GRVZl35D1cuWz1kzXZfF?p=preview

在自定义的fancybox(又名灯箱，一个对话框)中，我显示带有内插值的内容.

In the custom fancybox (aka lightbox, a dialog) I show contents with interpolated values.

在服务中，在打开"fancybox 方法中，我这样做

in the service, in the "open" fancybox method, i do

 open: function(html, $scope) {
        var el = angular.element(html);
        $compile(el)($scope); // how to know when the $compile is over?
        $.fancybox.open(el); // the uncompiled is shown before the compiled
      }

问题是对话框中的内容是在 $compile 结束之前加载的，所以不到一秒钟，我就用值刷新了对话框内容.

The problem is that the content in the dialog is loaded before the end of the $compile, so after less than a second i got a refresh of the dialog content with the values.

plunkr 可以工作，但我想避免在el"完全编译之前显示它:我只想在 $compile 完成他的工作后才显示它

有没有办法知道 $compile 何时结束，然后我才会在fancybox上显示内容?

Is there a way to know when the $compile it's over so i'll show the content on fancybox only after that?

推荐答案

我在使用 ngDialog 模态和弹出窗口提供程序时遇到了同样的问题.我需要根据其高度定位对话框.但是高度取决于编译的DOM.

I've had the same problem with the ngDialog modals and popup provider. I needed to position the dialog based on its height. But the height depended on the compiled DOM.

我最终找到了使用 $timeout 的解决方案，如该帖子中所述:http://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/

I eventually found a solution using $timeout, like described in that post: http://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/

对于您的代码，它会给出类似的内容:

For your code, it would give something like that:

open: function(html, $scope) {
    var el = angular.element(html);
    $compile(el)($scope);
    $timeout(function() {
        $.fancybox.open(el); 
    }, 0);
}

这篇关于AngularJS:如何知道 $compile 何时完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！