diff --git a/src/module.js b/src/module.js index 0f08d0b..948f35b 100644 --- a/src/module.js +++ b/src/module.js @@ -1209,4 +1209,64 @@ angular.module('stormpath', [ }); } }; +}]) + +/** + * @ngdoc directive + * @restrict A + * @name stormpath.spAutoFocusForm:spAutoFocusForm + * + * @description + * This directive, when placed on a container element, automatically focuses + * on the first descendant element inside the form. + * + * If the form is rendered synchronously, the directive can be placed on a form + * without any parameters and will focus immediately. However, if the form is + * instead loaded asynchronously, it needs to be passed a parameter that indicates + * when the form has loaded. As soon as the parameter evaluates to a truthy value, + * the autofocus will occur. When evaluation this value, the current scope is used. + * + * When there are no inputs inside the container, nothing happens. + * + * @example + *
+ *
+ *
+ *
+ *
+ */
+.directive('spAutoFocusForm', ['$timeout', function($timeout) {
+ return {
+ restrict: 'A',
+ link: function link(scope, elem, attrs) {
+ function focusFirstInput() {
+ var firstInput = angular.element(elem).find('input')[0];
+
+ if (firstInput) {
+ $timeout(function() {
+ firstInput.focus();
+ });
+ }
+ }
+
+ if (attrs.spAutoFocusForm.length) {
+ scope.$watch(function() {
+ return scope.$eval(attrs.spAutoFocusForm);
+ }, function(curr, prev) {
+ if (curr && !prev) {
+ focusFirstInput();
+ }
+ });
+ } else {
+ focusFirstInput();
+ }
+ }
+ };
}]);
diff --git a/src/spEmailVerification.tpl.html b/src/spEmailVerification.tpl.html
index c7657ff..919c525 100644
--- a/src/spEmailVerification.tpl.html
+++ b/src/spEmailVerification.tpl.html
@@ -20,7 +20,7 @@