0

BACKSTORY

I have a use case where I use an angular directive to build a fairly beefy form. The compiled directive will be used in multiple places, and rather than having to render the html multiple times, I would like to have the rendered template html and manually compile the html with the scope.

I approach this by manually compiling the directive on load:

$('body').append(preRenderedElement);
$compile(preRenderedElement)(templateScope);

This code then constructs mydirective properly and renders it to the page as desired. However, what I am ideally searching for is a way in which I can get either the HTML string or the DOM node without having to attach it to the DOM. I want to then be able to store the HTML string in template cache or convert the DOM node to an HTML string and then store it in the template cache.

Question

How do I obtain the rendered DOM node or HTML from the (manual) compile of a directive such that I can store it in template cache? Ideally, this will be done without ever having to attach the compiled HTML to the DOM.

Jaskaye17
  • 627
  • 10
  • 22
  • I don't really get what you want to do... when converting a node to a HTML string you will loose all scope bindings (because it will just be a simple string). The template cache can only keep strings. This wouldn't be the job for angular, you would loose all advantages and should probably just write a plain HTML form without any JavaScript. You could recompile the template, but if it contains HTML that was already compiled before you will probably see unexpected results. Please give some more information about what it is you want to archive with this. – eXaminator Aug 20 '15 at 20:44
  • In this case I have 3 different form types. The directive dynamically builds the forms based on a viewDefinition object associated with the scope. At a later point in time, data can be attached to this now built form element. Once I have built all 3 of the form templates, I would ideally not to have to rebuild the templates each time, but, would like to store the template so that the next time it is needed I can use said template rather than having to rebuild it using the earlier directive. Separately, I want to do this all manually so that I don't have to attach it to the DOM. – Jaskaye17 Aug 20 '15 at 20:54
  • The problem I have with your question is, that you want a "rendered HTML". So I guess by that you mean you want to get the HTML created by your directive including all resolved ng-repeat, ng-if and other directives. But those "other directives" would include ng-model. If you want to reuse this somehow compiled HTML with a new scope all directives would be compiled again. – eXaminator Aug 28 '15 at 13:06
  • It's possible that I am phrasing this incorrectly. In my construction however, there are two steps. I have a data struct that drives the template creation. In this case form names, field names, rows and column. Then I have another data set that I apply after which contains the data for the input controls. Once the template has been rendered, I envision a world where I could store that html, and then compile the data struct with the rendered html. – Jaskaye17 Aug 28 '15 at 16:08
  • I'm not sure if that is possible because for angular there is no difference in those two types of data, both are simply scope values that you use in your templates the same way (one probably in ng-repeat or name and type attributes, the other in ng-model). So angular can't really differentiate. You would need some custom logic / initial template creation for that. Maybe even outside of JavaScript if possible. – eXaminator Aug 31 '15 at 11:35

0 Answers0