Como rolar uma div para a esquerda usando o AngularJS

9

Eu tenho um div como abaixo:

<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 modelo de caixa:

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

e a diretiva:

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

    }
  };
})

Como você vê, eu tenho div contendo letras no alfabeto e estilizadas na rolagem horizontal.

Quando um botão é clicado, quero rolar essa div para a esquerda.

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

};

Eu tentei as funções animate e scrollLeft. Mas eu não fiz nada de bom. Existe uma função especial no AngularJS para essas situações? Como faço para rolar um div para a esquerda usando jQuery?

    
por cankemik 11.04.2014 в 18:09
fonte

1 resposta

3

Acho que você deveria dar outro valor ao seu scrollLeft. Porque no código dado, você está tentando rolar o elemento para sua localização atual, para que ele não se mova. Por exemplo:

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

PS: Por favor, verifique se você tem jQuery incluído. O subconjunto do jQuery incorporado no angularJS não parece suportar animate function

    
por Hamdi Douss 25.02.2016 / 10:29
fonte