Come scorrere un div a sinistra utilizzando AngularJS

Question

Ho un div come di seguito:

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

e il modello di dialogo:

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

e la direttiva:

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

    } 
    }; 
}) 

Come si vedo che ho div contenente lettere in alfabeto e in stile in scroll orizzontale.

Quando si fa clic su un pulsante, si desidera scorrere questo div a sinistra.

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

}; 

Ho provato le funzioni di animare e scrollLeft. Ma non ho fatto nulla di buono. Esiste una funzione speciale in AngularJS per queste situazioni? Come faccio a scorrere un div a sinistra usando jQuery?

Answer 1

Penso che dovresti dare un altro valore al tuo scrollLeft. Perché nel codice indicato, stai provando a far scorrere l'elemento nella posizione corrente, in modo che non si muova. Per esempio:

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

PS: Si prega di assicurarsi di avere jQuery inclusa. Il sottoinsieme di jQuery incorporato in angularJS non sembra supportare la funzione animate