Useful Angular Directives

directives.js

angular.module('cocoApp')
  .directive('goBack', function () {
      return {
          restrict: 'A',
          link: function (scope, element, attr) {
              element.on('click', function () {
                  history.back();
                  scope.$apply();
              })
          }
      }
  })
  
  .directive('autofill', ['$timeout', function ($timeout) {
      return {
          require: 'ngModel',
          link: function (scope, element, attr, ngModel) {
              var origVal = element.val();
              $timeout(function () {
                  var newVal = element.val();
                  if (ngModel.$pristine && origVal !== newVal) {
                      ngModel.$setViewValue(newVal);
                  }
              }, 500);
          }
      }
  }])
  
  .directive("passwordVerify", function () {
      return {
          require: "ngModel",
          scope: {
              passwordVerify: '='
          },
          link: function (scope, element, attrs, ctrl) {
              scope.$watch(function () {
                  var combined;
                  
                  if (scope.passwordVerify || ctrl.$viewValue) {
                      combined = scope.passwordVerify + '_' + ctrl.$viewValue;
                  }
                  return combined;
              }, function (value) {
                  if (value) {
                      ctrl.$parsers.unshift(function (viewValue) {
                          var origin = scope.passwordVerify;
                          if (origin !== viewValue) {
                              ctrl.$setValidity("passwordVerify", false);
                              return undefined;
                          } else {
                              ctrl.$setValidity("passwordVerify", true);
                              return viewValue;
                          }
                      });
                  }
              });
          }
      };
  })
  
  .directive('forceLowerCase', function ($parse) {
      return {
          require: 'ngModel',
          link: function postLink(scope, element, attrs, modelCtrl) {
              var lowerize = function (inputValue) {
                  if (!inputValue) {
                      return inputValue;
                  }
                  var lowerized = inputValue.toLowerCase();
                  if (lowerized !== inputValue) {
                      modelCtrl.$setViewValue(lowerized);
                      modelCtrl.$render();
                  }
                  return lowerized;
              };
              
              var model = $parse(attrs.ngModel);
              modelCtrl.$parsers.push(lowerize);
              lowerize(model(scope));
          }
      };
  })
  
  .directive('onCarouselChange', function ($parse) {
      return {
          require: 'uib-carousel',
          link: function (scope, element, attrs, carouselCtrl) {
              var fn = $parse(attrs.onCarouselChange);
              var origSelect = carouselCtrl.select;
              
              carouselCtrl.select = function (nextSlide, direction) {
                  
                  fn(scope, {
                      nextSlide: nextSlide,
                      direction: direction,
                  });
                  
                  return origSelect.apply(this, arguments);
              };
          }
      };
  })

  .directive('scrollSpy', function ($parse, $log, $window, $document, $timeout) {
      var $win = angular.element($window);
      return {
          restrict: 'A',
          link: function ($scope, elem, attrs) {
              
              var scrollTargetElem = attrs.scrollTargetElement || undefined;
              var scrollTargetOffset = attrs.scrollOffset || '600px';
              var scrollSpyFn = attrs.scrollSpy;
              var scrollUpFn = attrs.scrollUp;
              var scrollDownFn = attrs.scrollDown;
              var lastScrollTop = 0;
              var target, fn, direction;
    
              if (scrollTargetElem.indexOf('#') !== 0) {
                  scrollTargetElem = '#' + scrollTargetElem;
              }
              
              // Optimum solution?  needs more digging
              $timeout(function () {
                  
                  var $scrollElem = angular.element(scrollTargetElem);
    
                  if (isset(scrollTargetElem)) {
                      target = $scrollElem.offset().top
                  } else if (isset(scrollTargetOffset)) {
                      target = scrollTargetOffset;
                  } else {
                      return false;
                  }
                  
                  
                  $win.on('scroll', function (e) {
                      
                      var scrollTop = $win.scrollTop();
                      
                      if (scrollTop > lastScrollTop) {
                          
                          direction = 'down';
                          
                          if (isset(scrollSpyFn)) {
                              fn = $parse(scrollSpyFn);
                          } else if (isset(scrollDownFn)) {
                              fn = $parse(scrollDownFn)
                          }
                          
                      } else {
    
                          direction = 'up';
    
                          if (isset(scrollSpyFn)) {
                              fn = $parse(scrollSpyFn);
                          } else if (isset(scrollUpFn)) {
                              fn = $parse(scrollUpFn)
                          }
                      
                      }
                    
                      lastScrollTop = scrollTop;

                      $scope.$apply(function () {
                          fn($scope, {
                              elem: elem,
                              direction: direction,
                              target: target,
                              scrollTop: scrollTop,
                              e: e
                          });
                      });
                  });
                  
                  
              }, 100);
          }
      }
  });