4

I need to dynamically compile html and pass it from function as text. So, I have this code (simplified version for debugging purpose):

angular.module('app', [])
  .run(function($rootScope, $compile){
    var data = ["1","2"];
    var html  =
        '<div>' +
        '<ul>' +
        '<li ng-repeat="score in data">{{score}}</li>' +
        '</ul>'+
        '</div>';

    var el = angular.element(html);

    $rootScope.data = data;

    var result = $compile(el)($rootScope);

    console.log(result.html());
  })

The result is only:

<ul><!-- ngRepeat: score in data --></ul>

So, it looks like ngRepeat does not "repeat" "li" element.

Why?

JsFiddle: http://jsfiddle.net/yoorek/K4Cmk/

(I know DOM manipulation should be in directive etc. and I know how to do it other way but I need to understand why this does not work)

Yoorek
  • 1,003
  • 1
  • 12
  • 30

2 Answers2

5

If you look at the angular source code, ngRepeat will manipulate the DOM and "repeat" the elements within the $watchCollection handler:

ngRepeat Link Function

When you manually compile and link the element from the run block, the $watch handlers for your element have been set up but the $digest phase has not happened yet. It is the $digest phase where the scope examines all of the $watch expressions and executes their corresponding watch handlers.

If you want to inspect the element after the $digest (render) phase you can use $timeout:

  $timeout(function() {
       console.log(el.html());
      alert(el.html());
  });

Demo Fiddle

Michael Kang
  • 52,003
  • 16
  • 103
  • 135
  • i have such issue right now, but it is a bit different. i have my template which is from view : var table = document.getElementById('my-table').outerHTML; and i use templateCache : $templateCache.put('template', table); then i compile this : var el = $compile($templateCache.get('template'))($rootScope); still, it doesn't work for me. do you have any ideas? – chourn solidet Nov 11 '16 at 02:21
  • when I run your code in " angular.module('app', []) .run ", it works but when i move it controller " angular.module('app', []) .controller " i still get something like this
    – chourn solidet Nov 12 '16 at 03:34
0

I was wondering why the answer above does not work with $scope.$evalAsync() instead of $timeout. I believe these explain:
1. http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm
2. AngularJS : $evalAsync vs $timeout

Community
  • 1
  • 1
deeSo
  • 40
  • 5