compiling a template into a string in angular without a directive

Question

I'm trying to add some html into a tinyMCE textarea (tinyMCE can show html inside those editable textareas while allowing the user to manipulate them live).

So, lets say my template is:

var template = '<span>hello {{ user.name }}</span>'

I'm trying to:

compile the template with the current controller's scope.
stringify it into a varialbe (after it was compiled)
concat it to the end of the tinyMCE editor.

my controller's code is:

// [...]
var user = {};
user.name = "john";
$scope.user = user;

$templateRequest('<PATH_TO_TEMPLATE>').then(function() {
  var linkingFunc = $compile(template);

  // if I understand correctly, this should replace the user.name with "john"
  var parsedTemplate = linkingFunc($scope);
  console.log(parsedTemplate.prop('outerHTML'));
});
// [...]

The output of parsedTemplate.prop('outerHTML') is:

<span>hello {{ user.name }}</span>

Does it get rendered only if I inject it to the DOM after linking it to the scope?

is there a way to get it compiled in the javascript without rendering it back?

I'm trying to get some sort of var templateWITHOUTVariables which will euqal <span>hello john</span>

any ideas?

thanks!

stackoverflow.com/questions/14565835/… stackoverflow.com/questions/27008280/… — FrailWords
– FrailWords, Commented Dec 28, 2015 at 13:43
@FrailWords I'm not sure how this helps me. it requires a digest which I can't do since I'm in a middle of a digest. If I try to access the template on the DOM without a digest, I see the unrendered template. I can't digest even if I create a new scope that is unrelated to the current controller's scope. — Thatkookooguy
– Thatkookooguy, Commented Dec 28, 2015 at 14:32
@FrailWords Also, I was hoping to find a solution without injecting the template back to the DOM in order to render it (as mentioned in my question). The question you linked doesn't tackle that at all since the OP wanted the template injected back into the DOM tree — Thatkookooguy
– Thatkookooguy, Commented Dec 28, 2015 at 14:46
Running $digest doesn't mandate injection back into DOM. Those posts are basically pointing in the direction that once you $compile your HTML string with the current scope, it may not immediately be available to the console.log statement unless you run a $digest cycle or put it inside a '$timeout` like so - $timeout(function() {console.log(parsedTemplate.prop('outerHTML')) }); — FrailWords
– FrailWords, Commented Dec 28, 2015 at 17:07

Thatkookooguy · Accepted Answer · 2015-12-29 08:55:33Z

3

Thanks to @FrailWords, I solved this using $timeout.

So my code looks like this:

var user = {};
user.name = "john";
$scope.user = user;

$templateRequest('<PATH_TO_TEMPLATE>').then(function() {
  var parsedTemplate = $compile(template)($scope); // at this point, the template isn't processed yet
  //timeout in order to get the template processed
  $timeout(function() {
    console.log(parsedTemplate.prop('innerHTML');
  })
});

output:

<span>hello john</span>

When the $timeout executes, the $digest process already finished processing the parsedTemplate.

answered Dec 29, 2015 at 8:55

Thatkookooguy

7,0521 gold badge36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

compiling a template into a string in angular without a directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related