angular directive for toolbar scrolling shadow effect

toolbar-scroll-shadow.js

'use strict';
(function (angular) {

  angular.module('directives')
    .directive('toolbarScrollShadow', Directive);

  /** @ngInject */
  function Directive() {
    var directive = {
      restrict: 'A',
      link: linker,
      controller: DirectiveCtrl,
      controllerAs: 'toolbarScrollShadow',
      bindToController: true
    };

    /** @ngInject */
    function linker(scope) {
      var ctrl = scope.toolbarScrollShadow;
      ctrl.init();
    }

    return directive;
  }

  /** @ngInject */
  function DirectiveCtrl($scope, $element, $attrs, $window, $document) {
    this.Scope = $scope;
    this.Element = $element;
    this.Attrs = $attrs;
    this.Window = $window;
    this.$document = $document;
  }

  DirectiveCtrl.prototype.init = function () {
    var target = this.$document;
    if(this.Attrs.scrollTarget) {
      target = angular.element(this.Window.document.querySelector('#' + this.Attrs.scrollTarget));
    }

    target.bind('scroll', function() {
      target[0].scrollTop !== 0 ? this.Element.addClass('toolbar-shadow') : this.Element.removeClass('toolbar-shadow');
    }.bind(this));
  }

})(angular);

toolbar-scroll-shadow.scss

.toolbar-shadow {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}