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没有＆＃34;重复＆＃34; ＆＃34;利＆＃34;元件。

为什么？

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

（我知道DOM操作应该在指令等等，我知道如何以其他方式做，但我需要理解为什么这不起作用）

Answer 1

如果你看一下角度源代码，ngRepeat会操纵DOM并且＆＃34;重复＆＃34; $ watchCollection处理程序中的元素：

ngRepeat Link Function

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

如果要在$ digest（渲染）阶段之后检查元素，可以使用$ timeout：

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

Demo Fiddle

Answer 2

我想知道为什么上面的答案不适用于$ scope。$ evalAsync（）而不是$ timeout。我相信这些解释：
1. http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm
2. AngularJS : $evalAsync vs $timeout

由$ compile编译的ngRepeat不起作用

2 个答案: