angular - change css on scroll - directive.js

/**
 * 
 * Directive  : 
 * 
 * trigger bool 'scrollChCssTriggerValue' change 
 * when document scrolls more than 'scrollChCssTriggerValue'
 * 
 * @PARAM : scrollChCssFlag 		: scope value - object { scrollChCssTriggerValue: booolValue}
 * @PARAM : scrollChCssTriggerValue 	: attribute - number 
 * 
 * 
 * in your Html element, just add (example here a div) :
 *  <div 
 * 	scroll-change-css 
 *	scroll-ch-css-flag="YourControllerAs.scrollChgClassWatcher" 
 *	scroll-ch-css-trigger-value="55" 
 *	ng-class="{'classAddedForExample' : YourControllerAs.scrollChgClassWatcher.changeClassTriggered}"
 * >example Div</div>
 * 
 * => will add "classAddedForExample" css class to this div when document scrolls more than 55px
 * 
 * MIT 2015 - Erwan DATIN (MacKentoch)
 */
 ;(function(){
	 'use strict';
	 
	 angular
	 	.module('scrollChangeCss.Directive', [])
		.directive('scrollChangeCss' , scrollChangeCss);
		
		
		scrollChangeCss.$inject = ['$document'];
		function scrollChangeCss($document){
			
			var directive = {
				restrict 	: 'A',
				scope : {
					scrollChCssFlag : '='
				},
				link : linkfct
			};
			return directive;

			function linkfct(scope, element, attrs){
				
				scope.scrollChCssFlag = {
					changeClassTriggered : false
				};
				
				if (typeof attrs.scrollChCssTriggerValue === 'undefined') {
					attrs.scrollChCssTriggerValue = 0;	
				}
				
				angular.element($document).bind('scroll', function() {

					var navHeight = attrs.scrollChCssTriggerValue;
					
					if (angular.element($document).scrollTop() > navHeight) {
						scope.scrollChCssFlag.changeClassTriggered = true;
					} else {
						scope.scrollChCssFlag.changeClassTriggered = false;
					}

					scope.$apply();
				});				
				
			}			

		}
 })();