angularjs 지시문에서 내부 요소에 액세스하는 방법은 무엇입니까?

Question

자식 수 x 첫 번째 자식 너비로 요소 스크롤러 너비를 계산하고 싶습니다. 이렇게하려면 지시어 hscroller를 설계했습니다.

app.directive('hscroller', function() { 
    return { 
     restrict: "A", 
     link: function(scope, element, attr) { 
      var pid=$(element).attr("id"); 
       var children = $(element).children(); 
       var id=$(children).attr("id"); 
       var firstChild = $(children[0]); 
       var width = firstChild.width()*(children.length); 
       console.log("openPopover hscroller: compute scroller (id="+id 
        +") width "+children.length+" children of " 
        +firstChild.width()+"px width, total="+width 
        + " (parentid="+pid+")" 
       ); 

       $(element).css({"width":width+"px"}); 
     } 
    }; 
}); 

실행하는 동안, 그것은 지시어가있는 아이합니다 (ng-와 경쟁 조건이없는 소리를 다음과 같이

<div class="scrollerContainer"> 
    <div id="photos" class="scroller" hscroller="hi!"> 
     <div ng-repeat="photo in stage.photos" 
      class="imageViewerBackground" 
      style="background-image: url(rsc/stage/{{stage.id}}/{{photo.file}}.thumb.jpg)" 
      ng-click="openPopoverImageViewer('#photos', $index)" 
      > 
      <div>{{photo.description}}</div> 
     </div> 
    </div> 
</div> 

이 지침은 다음과 같이

html로는 reapeat?), 로그는 다음과 같습니다.

[Log] openPopover hscroller: compute scroller (id=undefined) width 0 children of nullpx width, total=0 (parentid=photos) 

나는 이것으로 어떤 생각을 가지고 있습니까?

참고 :이 모든 것은 스크롤 장치 요소의 너비를 조정하여 ipad 장치에 좋은 가로 스크롤러가있을 수 있습니다 (CSS에 수정 사항이 있습니까?).

.hScrollable { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    white-space:nowrap; 
} 

.scrollerContainer { 
    width: 100%; 
    height: @popoverScrollHeight; 
    .hScrollable; 
} 
.scroller { 
    overflow: hidden; // this is really important to avoid vertical scrolling on devices 
    height: @popoverScrollHeight; 
} 

Answer 1

아마도 $ timeout 콜백 내의 링크 함수에 코드를 작성하고 싶을 것입니다.

이미 jquery 객체이므로 jQuery로 요소를 래핑 할 필요가 없습니다.

app.directive('hscroller', function ($timeout) { 
    return { 
     restrict: "A", 
     link: function(scope, element, attr) { 
      $timeout(function(){ 
       var pid=element.attr("id"); 
       var children = element.children(); 
       (...) 
      }); 

     } 
    }; 
}); 

가 정말 jQuery 플러그인은 작성 방법에 따라 달라집니다