wie blättern Seite in die Mitte auf den Fokus des Eingabefeldes

Question

Ich versuche, die Seite nach oben oder unten, wenn jemand Tabs durch Eingabefelder in einem Formular. Ich möchte, dass das aktuell fokussierte Eingabeelement vertikal in der Mitte der Seite zentriert wird, während ein Benutzer durch Tabs blättert. Ich habe eine Direktive dafür geschrieben, aber es funktioniert nicht so, wie ich es erwarte.

angular 
    .module('app') 
    .directive('formScroll', formScroll); 

function formScroll($window) { 

     function link(scope, elem) { 
      elem.bind('focus', function() { 
       var offset, 
        elOffset = elem.offset().top, 
        elHeight = elem.height(), 
        windowHeight = $window.innerHeight; 

       offset = elOffset - ((windowHeight - elHeight)/2); 

       $window.scrollTo(0, offset); 
      }); 
     } 
    } 

Answer 1

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

app.directive('formScroll', formScroll); 
    function formScroll($window) { 
     return { 
     link: function(scope, elem) { 
       elem.bind('focus', function() { 
        var offset, 
       elOffset = elem.prop('offsetTop'), //.offset().top, 
       elHeight = elem.prop('height'), //elem.height(), 
       windowHeight = $window.innerHeight; 
       offset = elOffset - ((windowHeight - elHeight)/2); 
       $window.scrollTo(0, offset); 
       }); 
     } 
     } 
    } 

Ich veränderte die formScroll Funktion ein Objekt zurück {link: ...}, Auch verwendet elem.prop (....)