Scroll right with AngularJS and Javascript

Question

I'm learning things a little backwards because I hopped from jquery to angualrJs without truly learning javascript. I do know some javascript but I'm also very lost on how to implement it with my Angular Projects. My current dilemma is that I'm trying to use javascript in a controller to scroll left or right when a button is hovered over in my view.

My javascript function in my controller is as follows.

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

  }

})();

and it is called from the view like so.

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

I feel like I have to call the element from the DOM into my javascript function in order for it to work correctly but I'm a little lost about what I'm actually doing. Can someone help me connect the dots?

you are missing a reference to your scope object can you post the full file? it would be found off the element on scope. — user796446
– user796446, Commented Mar 19, 2016 at 19:13
also this isn;t the way I would set up the secondary function. — user796446
– user796446, Commented Mar 19, 2016 at 19:14
I'm sorry I'm not sure what you mean by scope object. I attached my controller to my route with UI router if that is what you're asking. Also, may I ask how you would set up a secondary function? I read that you shouldn't clutter your controller js with javascript I just don't know a better practice. — Jleibham
– Jleibham, Commented Mar 19, 2016 at 19:20

z.a. · Accepted Answer · 2016-03-19 19:57:36Z

2

I didn't test this, but this direction can be better for you. I converted your controller to a directive. You might need to create a html template as well. But his might work too.

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

edited Mar 19, 2016 at 19:57

answered Mar 19, 2016 at 19:12

z.a.

2,7973 gold badges15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jleibham Over a year ago

That seems to make sense. Unfortunately, it isn't working.

Jleibham Over a year ago

I guess the document.getElementByClass isn't being registered as a function.

z.a. Over a year ago

is this function in a directive?

user796446 Over a year ago

the first problem is that when controller is created document is not yet rendered. have you considering doing this in a resolve? medium.com/opinionated-angularjs/…

Jleibham Over a year ago

Interesting, I've never heard of resolves. I'm going to look into it now.

Collectives™ on Stack Overflow

Scroll right with AngularJS and Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related