맞춤 구성 요소 시스템을 만들기 위해 AngularJS를 사용하고있었습니다. 이미 구성 요소 시스템에 관한 질문을했습니다. here, 그래서 내 시스템이 어떻게 작동해야 하는지를 이해하기 위해 체크 아웃 할 수 있습니다. (아마도 조금 바뀌었지만 기본 아이디어는 그대로입니다.)AngularJS - 링크 기능에서 하위 요소에 액세스 할 수없는 이유는 무엇입니까?

구성 요소 지시문과 ng-include-attributed 요소를 통해 하위 요소를 찾으려고 시도했지만 어떻게 든 올바르게 작동하지 않습니다. 각 구성 요소에 사용되는이 지침에서는

.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-포함 지시어를 사용하여, 다음과 같이

지침

내 지시어이다. 구성 요소는 모듈성을 높이기 위해 별도의 파일로 구현됩니다. 페이지가 구성 요소를 사용하면

는, 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); 
}

을 그리고 어린이는 다음과 같다 :이 제외