由 $compile 编译的 ngRepeat 不起作用答案

【问题标题】：ngRepeat in compiled by $compile does not work由 $compile 编译的 ngRepeat 不起作用
【发布时间】：2014-07-08 17:44:13
【问题描述】：

我需要动态编译 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 操作应该在指令等中，并且我知道如何以其他方式进行操作，但我需要了解为什么这不起作用）

【问题讨论】：

标签： angularjs

【解决方案1】：

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

ngRepeat Link Function

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

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

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

Demo Fiddle

【讨论】：

我现在有这样的问题，但它有点不同。我有来自视图的模板： var table = document.getElementById('my-table').outerHTML;我使用 templateCache ： $templateCache.put('template', table);然后我编译这个： var el = $compile($templateCache.get('template'))($rootScope);不过，它对我不起作用。你有什么想法吗？
当我在“ angular.module('app', []) .run ”中运行您的代码时，它可以工作，但是当我移动它时，控制器“ angular.module('app', []) .controller" 我仍然得到类似的东西

【解决方案2】：

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

【讨论】：