Scrollen Sie nach rechts mit AngularJS und Javascript

Question

Ich lerne Dinge ein wenig rückwärts, weil ich von jquery zu angualrJs sprang, ohne wirklich Javascript zu lernen. Ich weiß etwas Javascript, aber ich bin auch sehr verloren, wie man es mit meinen Eckigen Projekten umsetzt. Mein derzeitiges Dilemma ist, dass ich versuche, Javascript in einem Controller zu verwenden, um nach links oder rechts zu scrollen, wenn eine Schaltfläche in meiner Ansicht eingeblendet wird.

Meine Javascript-Funktion in meinem Controller ist wie folgt.

(function() { 
    'use strict'; 

    angular 
    .module('bhamDesign') 
    .controller('GalleryController', GalleryController); 


    /** @ngInject */ 
    function GalleryController($scope, $stateParams, $http) { 

    var vm = $scope; 

     $http.get('assets/json/galleries/' + $stateParams.mainId + '.json').success(function(data) { 
     vm.gallery = data; 
     }); 

     vm.toggle = false; 

     vm.imageLightbox = function (image) { 
      vm.toggle=!vm.toggle; 
      vm.imageSingle = image; 
     }; 

     vm.scrollLeft = function(){ 
     getElementsByClassName('img-container').scrollLeft += 20; 
     }; 

     vm.scrollRight = function(){ 
     getElementsByClassName('img-container').scrollRight += 20; 
     }; 

    } 

})(); 

und es wird aus der Sicht wie so genannt.

<i id="scroll-left" ng-mouseover="scrollLeft()" class="fa fa-angle-left"></i> 
<i id="scroll-right" ng-mouseover="scrollRight()" class="fa fa-angle-right"></i> 

<div class="img-container"> 
    <img ng-src="{{image}}" ng-repeat="image in gallery.images" ng-click="imageLightbox(image)"> 
</div> 

Ich fühle mich wie das Element aus dem DOM in meine Javascript-Funktion, um verlangen, damit er korrekt arbeiten, aber ich bin ein wenig verloren, was ich gerade tue. Kann mir jemand helfen, die Punkte zu verbinden?

Answer 1

Ich habe das nicht getestet, aber diese Richtung kann besser für Sie sein. Ich habe deinen Controller in eine Direktive umgewandelt. Möglicherweise müssen Sie auch eine HTML-Vorlage erstellen. Aber seine Macht könnte auch funktionieren.

(function() { 
    'use strict'; 

    function galleryDirective($stateParams, $http, $document) { 
     /** @ngInject */ 
     function controller($scope) { 
     } 

     function link($scope) { 
      var $$document = angular.element($document); 

      $http.get('assets/json/galleries/' + $stateParams.mainId + '.json').success(function(data) { 
       $scope.gallery = data; 
      }); 

      $scope.toggle = false; 

      $scope.imageLightbox = function (image) { 
       $scope.toggle=!$scope.toggle; 
       $scope.imageSingle = image; 
      }; 

      vm.scrollLeft = function(){ 
       $$document.getElementsByClassName('img-container').scrollLeft += 20; 
      }; 

      vm.scrollRight = function(){ 
       $$document.getElementsByClassName('img-container').scrollRight += 20; 
      }; 
     } 

     return { 
      controller: controller, 
      link: link, 
      scope: { 

      } 
     } 
    } 

    angular 
      .module('bhamDesign') 
      .directive('galleryDirective', ['$stateParams', '$http', '$document', galleryDirective]); 

})(); 

<gallery-directive> 

    <i id="scroll-left" ng-mouseover="scrollLeft()" class="fa fa-angle-left"></i> 
    <i id="scroll-right" ng-mouseover="scrollRight()" class="fa fa-angle-right"></i> 

    <div class="img-container"> 
     <img ng-src="{{image}}" ng-repeat="image in gallery.images" ng-click="imageLightbox(image)"> 
    </div> 

</gallery-directive>