AngularJS-查找更改的DOM元素的寬度

Question

我覺得我提出的大多數Angular問題都讓我錯過了一些令人難以置信的傻瓜，所以讓我們也希望如此。

我正在建立一個指令來控制各種縮略圖的滾動。 在jQuery中，我可以完美地工作，但是jQuery對於從Angular獲取動態加載的列表並不滿意，所以我正在重寫代碼。 基本上，我有一個存在於ng-repeat中的圖庫：

<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>

當我單擊一些向下按鈕時，

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

該列表應該向后動畫/滑動，並在“ 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肯定在改變； 每次單擊下一個或上一個，數字都會增加一個。 但是，我得到的寬度僅適用於每組中的第一張圖像。 我有幾個畫廊，但是無論我單擊“下一步”多少次，畫廊一個只會給我“ 566”，畫廊兩個只會給我“ 433”，畫廊三個給“ 521”。 每個圖像的大小完全不同，所以...為什么只給我第一張圖像的寬度？

e：以下是我正在談論的內容： http ：//plnkr.co/edit/nLG4OKsNGvYTgEMg9UOv

Answer 1

在下面的代碼中：

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

您正在將imageNumber傳遞給children函數。 該children函數接受可選的選擇，而不是一個索引。 在您的情況下，這可能會返回包含所有li的jQuery對象，對width()的調用將返回第一個的寬度。

相反，索引器傳遞到什么children函數返回，並從那里（划分為清晰起見）：

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

要么：

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());
});