This blog is written for everyone, but my recommendation for the reader is to have:

• HTML – basic knowledge
• CSS – basic knowledge
• JavaScript – good knowledge
• AngularJS Framework – good knowledge
• Npm & Bower – basic knowledge
• Text editor – basic knowledge

To develop this AngularJS directive, I am going to use all: HTML, CSS, JavaScript, AngularJS, Npm and Bower. For an editor, I am going to use WebStorm which is developed by JetBrains (WebStorm isn’t free but it offers free 30-days trial and I recommend it because it is a powerful JavaScript IDE).

Getting Started

First of all, I am going to explain the process of setting up the structure of the application, so after that, we will concentrate on the process of developing the directive. We are:

• Downloading and installing NodeJS which Is available on its the official web page
• Creating a folder “C:\Users\dimitar.stefanovski\Desktop\Custom scroll\customScroll”
  • From the location you chose we open “cmd”:
  • Install globally bower, “bower install -g bower”
  • Initialize bower so that through the initialization process will be generated bower.json. In the bower.json filer will be written all our installed dependencies, “bower init”
  • Install AngularJS, “bower install angular –save-dev” – dependency will be automatically added in the bower.json
  • Install Bootstrap, “bower install bootstrap@3 –save-dev” – dependency will be automatically added in the bower.json

After the initialization, we are creating our folder structure:

After all pre-setup, we can start explaining all files one by one, but mostly we will hold on explaining the directive “paginationOnScroll”.

bower.json

bower.json after initializing and installing external dependencies 

In the bower.json we have few important fields:

• name: specify the name of the application
• devDependencies: these are all external dependencies which we installed and will be used during the development of our custom scroll directive
  • Example:
    • bower install angular –save-dev à automatically adds “angular”: “^1.7.0” in our “deveDependencies”

app.js

Initializing our application

This is the place where we are initializing a variable which will be responsible for creating, registering and retrieving AngularJS modules.

index.html

Our view

This is our HTML file which is responsible to make our scrolls to be visible when we open the application in the browser. An important thing that I want to mention is that I am going to develop the custom scroll directive on 2 types of HTML tags “select” and “div” which differs in the implementation.

• Тag “select” has properties:
  • ng-model: shows us which element is selected
  • ng-options: populates our scrolling list
  • size: makes the tag scrollable
  • pagination-on-scroll: the directive will be explained later
  • load-more: directive property which will be explained later
• Tag “div” has properties:
  • class=”scrollDiv”: class which used for adding some CSS
  • ng-repeat: populates our scrolling list
  • pagination-on-scroll: the directive will be explained later
  • load-more: directive property which will be explained later

To apply CSS on our application we must link our installed front-end library “bootstrap.min.css” and our custom CSS “simpleScroll.css”.

Also to make our application functional we must add:

• angular.min.js – AngularJS framework
• app.js – file responsible for initializing the application
• simpleScrollController.js – our controller which holds the logic
• simpleScrollDirective.js – our custom scroll directive

simpleScroll.css

Custom CSS

Adding custom CSS to “div” tag to make it scrollable.

simpleScrollController.js

                                                           Controller logic

In the controller, we initialize the scrolls and through for-loops, we increase the number of items.

Methods:

• init – initializes both scroll lists: names and numbers
• loadMoreNumbers – increases the number of items in the numbers list
• loadMoreNames – increases the number of items in the names list

Important!

When we increase the number of items in the lists, angular watchers aren’t activated so here we need to do it explicitly by calling “$digest()”. In short AngularJS $digest() reevaluates all the watchers in the current scope object and its child scope objects.

simpleScrollDirective.js

Custom scroll directive – paginationOnScroll

This is the most “complex” part of the process of creating a custom scroll directive. Let me explain every line:

• restrict: ‘A’ – Defines the type of the directive, in our case we use ‘A’ because we want to apply this directive to an HTML tag
• scope: { loadMore: “&” } – “&” is called “method binding” which creates an isolated scope and allows us to invoke a method from the parent scope
• link: function(scope, elem, attr)
  • scope – scope object
  • elem – the wrapped element that the directive is applied
• bind(“scroll”, …) – this is the part which we must understand
  • bind – we are adding a “scroll” event to our HTML tags, in our case “select” or “div”
  • “clientHeight” – height of visible content while we are scrolling
  • “scrollTop” – scrolled px from the top
  • “scrollHeight” – height of the scroll, including the padding

   “ScrollTop” vs “ScrollHeight” vs “ClientHeight”