CONTEXT

我需要在我的AngularJS(v1.4)应用程序中加载从后端获取的一些HTML并将其(html)插入到我的partial(已加载)中.部分已经加载了一些HTML(并且功能完全正常).现在我可以加载HTML并使用此处发布的指令(Compiling dynamic HTML strings from database)进行编译.见下面的代码.

问题

但是……当部分HTML已经加载(部分加载和功能)然后我从后端获得另一个HTML内容,并且该指令正在编译新的内容时,整个文档(DOM)被“冻结”.我无法输入输入或点击按钮,包括我之前加载的HTML中的按钮.

题

我如何加载HTML内容,$以“后台”编译它或任何其他允许我继续使用其余(已经功能)HTML的方式？

这对我来说是一个必要条件,到达的新html内容被编译,因为它包含角度验证等需要编译并进入“角度世界”(在角度digest cycle内等等).

这是我用来编译html的指令

(function () {

    var dynamic = function($compile) {
        return {
            restrict: 'A',replace: true,link: function (scope,ele,attrs) {
                scope.$watch(attrs.dynamic,function(html) {
                    if (html) {
                        ele.html(html);
                        $compile(ele.contents())(scope);
                    }

                });
            }
        };
    };

    dynamic.$inject = ['$compile'];

    angular.module('app')
        .directive('dynamic',dynamic);
}());

在控制器中,我有类似的东西

// this will be filled with asynchronous calls were I get the HTMLs from a service
// in order to keep this example simple I just made a demo,not with the real async calls
$scope.secciones = []

//when the promises are getting resolved "secciones" would be something like (more items can be added after in time)
$scope.secciones = [
    {html: "