为了创建自定义组件系统，我在搞AngularJS。我已经提出了一个关于我的组件系统here的问题，所以你可以检查一下，以便理解我的系统应该如何工作（也许它已经改变了一些，但基本的想法保持不变）。AngularJS - 为什么我不能访问链接函数中的子元素？

我试图通过组件指令和ng-include-属性元素寻找一个子元素，但不知何故事情并不正确。

指令

我的指令如下：

.directive("raqComponent", ["ComponentsStyles", 
function(componentsStyles){ 
    return { 
     restrict: "E", 
     scope: { 
      name: "@" 
     }, 
     template: "<div ng-include=\"'/Components/' + name + '.htm'\"></div>", 
     controller: function($scope, $timeout){ 
      componentsStyles.stylesheets.push($scope.name); 

      if(components[$scope.name] !== undefined){ 
       if(components[$scope.name].getData !== undefined){ 
        components[$scope.name].getData($scope); 
       } 
      } 
     }, 
     link: function(scope, elem, attrs){ 
      if(components[scope.name] !== undefined){ 
       if(components[scope.name].link !== undefined){ 
        console.log("Children:", elem.children()); 
        var elemTarget = elem; 
        components[scope.name].link(elemTarget); 
       } 
      } 
     } 
    }; 
}])

在这个指令，用于为每个组件，我用NG-include指令，包括我心爱的部件标记。组件在单独的文件中实现以增加模块性。

一旦页面使用的分量，DOM看起来像这样的实际网页上显示：

现在，元素raq-component与属性ng-include一个子元素。此元素具有一个子元素，它是特定组件的自定义标记的根元素。像这样：

<div class="navbar"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="navbar-items-container"> 
        <div class="navbar-items"> 
         <div ng-repeat="item in items" class="navbar-item"> 
          <p>{{item.name}}</p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

但是，当我尝试访问子元素时，我无法做到这一点。我在打印指令子元素是这样的：

if(components[scope.name].link !== undefined){ 
    console.log("Children:", elem.children()); 
    var elemTarget = elem; 
    components[scope.name].link(elemTarget); 
}

和孩子是这样的：