CODEWITHSUNDEEP
javascriptangularjs
pranavjindal999
pranavjindal999

Reputation: 3047

$compile not compiling html string - angularJs

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.

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?

Upvotes: 3

Views: 1463

Answers (1)

Estus Flask
Estus Flask

Reputation: 222344

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'))

Upvotes: 3

Related Questions