Question

我觉得我的大部分角色问题都是我错过了一些非常愚蠢的东西，所以让我们也希望这也是。

我正在构建一个指令来控制大量缩略图的滚动。在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>

该列表应该动画/向后滑动我的＆＃34; 0＆＃34;中的图像宽度。位置。基本上，它抓取宽度，然后将该宽度添加到我的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肯定在变化;每次我点击下一个或上一个，数字就会增加一个。但是，我得到的宽度仅适用于每组中的第一张图像;我有几个画廊，但不管我点击了多少次＆＃34;接下来，＆＃34;画廊一只会给我＆＃34; 566，＆＃34;仅限两个画廊＆＃34; 433＆＃34;，画廊三＆＃34; 521。＆＃34;每张图片都有完全不同的尺寸，所以...为什么它只给我第一张图片的宽度？

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

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

2 个答案: