AngularJSとJavascriptで右スクロール

Question

私はjqueryからangualrJsに真面目にjavascriptを習得していないので、少し後ろに学んでいます。私はいくつかのjavascriptを知っているが、私はAngular Projectsでそれを実装する方法もとても失われている。私の現在のジレンマは、私のビュー内でボタンが押されたときに、左または右にスクロールするためにコントローラでjavascriptを使用しようとしていることです。

私のコントローラのJavaScriptの機能は次のとおりです。

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

    } 

})(); 

このように表示されます。

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

私はそれが正しく機能するためには、私のjavascript関数にDOMから要素を呼び出す必要がありますような気がしますが、私は私が実際にやっていることについて少し迷ってしまいました。誰かがドットを結ぶのを助けることができますか？

Answer 1

私はこれをテストしませんでしたが、この方向性はあなたにとってより良いことがあります。あなたのコントローラーを指令に変換しました。 htmlテンプレートも作成する必要があります。しかし、彼も働くかもしれません。

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