javascript– 从后端渲染($compile)html到视图中而不阻塞dom

javascript– 从后端渲染($compile)html到视图中而不阻塞dom,第1张

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

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: "

……并且在视图


            
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)