Render ($ compile) html from backend to view without dom lock

Question

CONTEXT

I need to load some HTML from the backend into an AngularJS application (v1.4) and paste it (html) into my partial (already loaded). Partial already loaded some HTML (and fully functional). Right now I can download HTML and compile it with the directive located here ( Compiling dynamic HTML strings from a database ). See code below.

PROBLEM

But ... when part of the HTML is already loaded (partially loaded and functioning), and then I get other HTML content from the backend, and the directive compiles a new one, the whole document (DOM) gets “frozen”, I can’t enter the input or do what - Or clicking on buttons, including in the previous loaded HTML.

Question

How can I load the contents of HTML, $compile into "background" or in any other way that allows me to continue using the rest of the (already functional) HTML?

I need the new html content that arrived to compile because it contains angular validations, etc. that need to be compiled and enter the world of "angular" (be inside an angular digest loop , etc.).

This is the directive that I use to compile 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); }()); 

In the controller I have something like

 // 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: "<div> some html content here (not too small sometimes) </div>"}, {html: "<div> another html content here (not too small sometimes) </div>"} ] 

... and in view

 <!--every time an async call with html is resolved, it added to secciones, then a new div is generated and compiled--> <!-- if there was some html previously rendered and the app starts compiling new html the UI gets "freezed"--> <div ng-repeat="item in secciones"> <div dynamic="item.html"></div> </div> 

Note. . I use this approach because each html is a tab in the tabpanel that I have, in which the user actually sees only one html of all of them in "secciones" (the rest are hidden, but still there), but I need to compile the others, so that they are ready for the user when he clicks on this other tab (another html in secciones).

If this could be some solution, switching to the new version of AngularJS (1.x), say, for example, 1.6. I would love to try.

Answer 1

Basically, I did this by getting the html from the script tag and compiling it and adding to the existing div. You can use the following snippet.

Include div in your html

 <div id="step-container"> </div> 

Controller code

 var template = $templateCache.get('basicInfo'); // or your html $compile($("#step-container").html(template).contents())($scope); $("#step-container").show(); 

For demonstration, this will be included in the html page

 <script type="text/ng-template" id="basicInfo"></script> 

This way you can compile the html coming from the backend.

Hope this helps.

Answer 2

You can try using this directive to compile HTML code. This directive compiles code when any change is htmlCode in the htmlCode variable

 module.directive('bindHtmlCompile', ['$compile', function ($compile) { return { restrict: 'A', link: function (scope, element, attrs) { scope.$watch(function () { return scope.$eval(attrs.bindHtmlCompile); }, function (value) { element.html(value && value.toString()); var compileScope = scope; if (attrs.bindHtmlScope) { compileScope = scope.$eval(attrs.bindHtmlScope); } $compile(element.contents())(compileScope); }); } }; }]); 

you can install via bower, DirectiveRepo

APPLICATION:

<div bind-html-compile="htmlCode"></div>