Merge pull request lmc-eu#23 from rokerkony/ngxInvalidFocusFirst

show first ngx-invalid element when some are visible
abtris · Apr 23, 2013 · 434b575 · 434b575
2 parents 3ddc605 + 6ffff25
commit 434b575
Showing 1 changed file with 16 additions and 4 deletions.
diff --git a/src/modules/ui/invalid/invalid.js b/src/modules/ui/invalid/invalid.js
@@ -1,15 +1,15 @@
 // IE8 support
 document.createElement('ngx-invalid');
 
-(function(angular) {
+(function(angular, $) {
     'use strict';
 
     var module = angular.module('ngx.ui.invalid', []);
 
     /**
      * Input/Form invalid status
      */
-    module.directive('ngxInvalid', function() {
+    module.directive('ngxInvalid', ['$window', function($window) {
         return {
             restrict: 'EA',
             link: function(scope, element, attrs) {
@@ -18,8 +18,11 @@ document.createElement('ngx-invalid');
                 var parts = (attrs.ngxInvalid ? attrs.ngxInvalid.split(' ') : []),
                     input = (attrs.input ? attrs.input : parts[0]),
                     errors = (attrs.error ? attrs.error : parts[1]),
+                    scrollable = (attrs.ngxScrollable !== undefined ? true : false),
                     watch = [];
 
+                scope.elementOffset = 0;
+
                 // error types
                 if (errors) {
                     // can be comma-separated list
@@ -39,11 +42,20 @@ document.createElement('ngx-invalid');
                     watch.push(attrs.expression);
                 }
 
+                scope.$watch('elementOffset', function(value, oldvalue) {
+                    if(value !== oldvalue && value !== null) {
+                        $window.scrollTo(0, value.top - 50);
+                    }
+                });
+
                 scope.$watch(watch.join(' && '), function(value) {
                     element.toggle(value ? true : false);
+                    if(value === true && scrollable) {
+                        scope.elementOffset = $('.ngx-invalid:visible:eq(0)').offset();
+                    }
                 });
             }
         };
-    });
+    }]);
 
-})(window.angular);
+})(window.angular, window.jQuery);