angularjs - 为什么 ng-include 动态加载的模板的内容不能通过 DOM 选择器获得？

Question

这是一个显示问题的 jsfiddle:http://jsfiddle.net/yRLKe/5/

一个按钮在注入(inject) DOM 之前编译，另一个按钮在编译之前注入(inject)。我做了这两件事来确保我的编译方式不是问题的原因。

无论您单击哪个按钮，检查控制台输出，您会发现从 DOM 中选择时实际模板的内容不可用。

所以问题首先是为什么？ - 为什么它会这样？
但是 最重要的是如何 ? - 如何通过 DOM 选择器访问实际加载的模板的 HTML？

这是模板:

<script type="text/ng-template" id="template1.html">
   <div>This is template 1!</div>
   <div id="test">Hello {{name}}</div>
</script>

这是 Controller :

myApp.controller('MyCtrl', function($scope) {
  $scope.name = 'Superhero';
  $scope.template = {url:'template1.html'};
  $scope.clickButton1 = function(){
    $scope.$emit('buttonClicked1');  
  };
  $scope.clickButton2 = function(){
    $scope.$emit('buttonClicked2');  
  };
});

这是指令:

myApp.directive('compileBeforeInsert', function($compile){
  return function(scope, element, attrs){
    scope.$on('buttonClicked1',function(ev){
        var container = $('#container');
        container.html('<div ng-include src="template.url" id="template">test1</div>');
        $compile(container)(scope);
        console.log('before');
        console.log($('#template').html());
    });    
  }
});

该指令将“test1”输出到控制台，而我希望它输出“Hello Superman!”。

Answer 1

将输出写入控制台时，不会渲染 dom。使用 $timeout ，您可以查看渲染的内容。很多人说这是一个hack。无论如何，它有效。这是我更改的内容，两个指令的结果相同:

//after injecting $timeout in the directive:
  $compile(container)(scope);
  console.log('before');
  console.log($('#template').children().text());
  $timeout(function(){
      console.log('before, in timeout:');
      console.log($('#template').children().text());
  },0)

Here's the fiddle

另外， see this answer并查看其中的链接。