$compile not compiling html string - angularJs

Question

I'm trying to compile some raw html with angular directives with the properties over scope but it is not working as expected. Here is an snapshot of simple code I'm running on a breakpoint in console.

$scope.scopeString = "scope string value";

"scope string value"


$scope.scopeArray = [1,2,3]

(3) [1, 2, 3]


$compile(`<div>{{scopeString}}</div>`)($scope).prop('outerHTML')

"<div class="ng-binding ng-scope">{{scopeString}}</div>"


$compile(`<div><div ng-repeat="item in scopeArray">{{item}}</div></div>`)($scope).prop('outerHTML')

"<div class="ng-scope"><!-- ngRepeat: item in scopeArray --></div>"

Can anyone tell what am I doing wrong?

What's the interpretion of '$compile(<div>{{scopeString}}</div>)($scope).prop('outerHTML')'? — artgb
– artgb, Commented Aug 24, 2017 at 10:58

Estus Flask · Accepted Answer · 2017-08-24 11:36:08Z

3

Scope bindings are calculated on digest cycle. Retrieving HTML from the element immediately doesn't leave it a chance to interpolate bindings.

When code is executed inside digest cycle (e.g. a controller) it can be

var $el = $compile(`<div>{{scopeString}}</div>`)($scope);
$timeout(() => {
  console.log($el.prop('outerHTML'))
});

When it is executed outside digest, it is

var $el = $compile(`<div>{{scopeString}}</div>`)($scope);
$scope.$apply();
console.log($el.prop('outerHTML'))

answered Aug 24, 2017 at 11:36

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

4 Comments

pranavjindal999 Over a year ago

I was doing this in an existing digest cycle i.e. controller but I don't understand why do I have to let the current cycle complete to get the compiled html. I don't find explanation for it in documentation also..

Estus Flask Over a year ago

Because the expression will be calculated at some point during current digest, but you need to wait until this moment. This can also be done with $$postDigest hook that exists for this purpose ($$ indicates that it's undocumented and you should know what you're doing): $scope.$$postDigest(() => { console.log($el.prop('outerHTML')) })

pranavjindal999 Over a year ago

$compile definition-

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

I thought template function returned by $compile when called with scope will return the final compiled html. At least the definition seems to imply so. Anyways thanks a lot for help !!

Estus Flask Over a year ago

As it appears, it returns HTML element that will be filled with interpolated values soon (during a digest). You're welcome.

Collectives™ on Stack Overflow

$compile not compiling html string - angularJs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related