angularjs - 由 $compile 编译的 ngRepeat 不起作用

Question

我需要动态编译 html 并将其从函数中作为文本传递。
所以，我有这个代码(用于调试的简化版本):

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());
  })

结果只有:

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

因此，看起来 ngRepeat 不会“重复”“li”元素。

为什么？

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

(我知道 DOM 操作应该在指令等中，我知道如何以其他方式进行操作，但我需要了解为什么这不起作用)

Answer 1

如果您查看 angular 源代码，ngRepeat 将操作 DOM 并“重复”$watchCollection 处理程序中的元素:

ngRepeat Link Function

当您从 run 块手动编译和链接元素时，您的元素的 $watch 处理程序已经设置，但 $digest 阶段尚未发生。在 $digest 阶段，范围检查所有 $watch 表达式并执行它们相应的监视处理程序。

如果您想在 $digest (render) 阶段之后检查元素，您可以使用 $timeout:

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

Demo Fiddle