Làm thế nào để di chuyển một div sang trái bằng AngularJS

Question

Tôi có một div như dưới đây:

<div class="col-xs-1 scroll-button"><i class="glyphicon glyphicon-chevron-left"></i> </div> 
<div class="customer-ust-bant col-xs-22" id="letters"> 
    <box ng-repeat="lt in alph" name="{{lt}}" id="{{lt}}"></box> 
</div> 
<div class="col-xs-1 scroll-button" ng-click="gotoBottom()"><i class="glyphicon glyphicon-chevron-right"></i> </div> 

và hộp mẫu:

<div class="alphabet-kutu">{{name|uppercase}}</div> 

và chỉ thị:

app.directive("box", function() { 
return { 
    restrict:"E", 
    scope:{ 
     name:"@" 
    }, 
    templateUrl:"/static/templates/customers/box.html", 
    link:function(scope,elem,attrs,ctrl) { 

    } 
    }; 
}) 

Như bạn xem tôi có div chứa các chữ cái trong bảng chữ cái và được tạo kiểu theo chiều ngang.

Khi một nút được nhấp, tôi muốn cuộn div này sang trái.

$scope.gotoBottom = function(){ 
var element = angular.element(document.querySelector('#letters')); 
    element.animate({scrollLeft: element.offset().left}, "slow"); 
    //element.scrollLeft(100); 

}; 

Tôi đã thử các chức năng animate và scrollLeft. Nhưng tôi không làm gì tốt. Có một chức năng đặc biệt trong AngularJS cho tình huống này không? Làm thế nào để di chuyển một div sang trái bằng cách sử dụng jQuery?

Answer 1

Tôi nghĩ bạn nên cung cấp một giá trị khác cho scrollLeft của mình. Bởi vì trong mã đã cho, bạn đang cố gắng di chuyển phần tử đến vị trí hiện tại của nó, vì vậy nó sẽ không di chuyển. Ví dụ:

element.animate({scrollLeft: element.offset().left - 50}, "slow");

PS: Hãy đảm bảo rằng bạn sẽ sử dụng jQuery bao gồm. Tập hợp con của jQuery được nhúng trong angularJS dường như không hỗ trợ chức năng animate