AngularJS - 변화하는 DOM 요소의 너비를 찾는다

Question

내가 생각하는 대부분의 Angular 질문은 내가 무언가를 믿을 수 없을만큼 바보로 놓치고 있다는 것을 느낍니다.

다양한 미리보기 이미지 목록의 스크롤을 제어하는 ​​지시문을 작성하고 있습니다. jQuery에서는 완벽하게 작동하지만 jQuery는 동적으로로드 된 목록을 Angular에서 가져 오는 것이 쉽지 않으므로 코드를 다시 작성합니다. 목록이 뒤로/슬라이드를 애니메이션하도록되어

<slider class="mover" style="left:0;">&laquo;</slider> 
<slider class="mover" style="right:0;">&raquo;</slider> 

<div id="gallery"> 
    <ul id="gallery_img"> 
     <li class="thumb" ng-repeat="image in thumbnails"> 
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}" /> 
     </li> 
    </ul> 
</div> 

을하고 좀 더 다운 버튼을 클릭하면, : 기본적으로, 나는 NG-반복에 존재하는 갤러리있어 내 "0"위치에서 이미지의 너비를 전달합니다. 기본적으로 너비를 잡고 그 너비를 내 UL 왼쪽 위치에 추가합니다. 슈퍼 간단, 맞죠? 내가지고있어 무엇 폭 볼 수 있도록

app.directive('slider', function() { //to reuse, replace "#gallery_img" with whatever you want 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs){ 
      var toMove = angular.element('#gallery_img'); 
      var imageWidth; 
      var imageNumber = 1; 
      element.bind('mousedown', function(){ 
       toMove.css({left: '-=200'}); 
       console.log(toMove.children([imageNumber]).width()); 
       console.log(imageNumber); 
       imageNumber +=1; 
      }); 
     } 
    } 
}); 

내가 어떤 CONSOLE.LOG 세부 사항을 추가 :

는 여기이 순간에이 운동을 제어있어 한 지침입니다. 내 imageNumber가 확실히 바뀌고 있습니다. 다음 또는 이전을 클릭 할 때마다 번호가 하나 올라갑니다. 내가 얻는 너비는 각 세트의 첫 번째 이미지에만 적용됩니다. 몇 개의 갤러리가 있지만 "다음"을 클릭 한 횟수에 관계없이 갤러리 1은 "566", 갤러리 2는 "433", 갤러리 3은 "521"만을 제공합니다. 각각의 이미지는 완전히 다른 크기이므로 ... 왜 첫 번째 이미지의 너비 만 제공합니까?

전자 : 디버깅 http://plnkr.co/edit/nLG4OKsNGvYTgEMg9UOv

Answer 1

여기에 내가 이야기하고의 plnkr가있다 :

toMove.children([imageNumber]).width() 

imageNumber을 children 함수에 전달합니다. children 함수는 인덱서가 아닌 선택적 선택기를 사용할 수 있습니다. 귀하의 경우 이것은 아마도 li을 모두 포함하는 jQuery 객체를 반환하고 width()에 대한 호출은 첫 번째의 너비를 반환합니다.

이 대신 무엇을 children 함수가 반환에 인덱서를 통과하고 (명확성을 위해 분할) 거기에서 이동 :

var children = toMove.children() 
var width = $(children[imageNumber]).width(); 
console.log(width); 

또는를 : 그것은 Plunkr으로이 참조하는 것이 유용 할 것이다

var width = toMove.children().eq(imageNumber).width(); 
console.log(width); 

Answer 2

확인이 도움이 : 다음 코드에서

console.log(toMove.children().length); // how many children are seen? 

다음

angular.forEach(toMove.children(), function(element, index){ 
    console.log(index, angular.element(element).width()); 
});