Wie setze ich den Fokus auf das Eingabefeld?

Was ist der ‘angularweg’, um den Fokus auf Eingabefelder in AngularJS zu setzen?

Spezifische Anforderungen:

  1. Wenn ein Modal geöffnet ist, setze den Fokus auf eine vordefinierte in diesem Modal.
  2. Jedes Mal, wenn sichtbar wird (z. B. durch Klicken auf eine Schaltfläche), stellen Sie den Fokus darauf ein.

Ich habe versucht, die erste Anforderung mit autofocus zu erreichen , aber das funktioniert nur, wenn das Modal zum ersten Mal geöffnet wird und nur in bestimmten Browsern (zB in Firefox funktioniert es nicht).

Jede Hilfe wird geschätzt.

  1. Wenn ein Modal geöffnet ist, setze den Fokus auf eine vordefinierte in diesem Modal.

Definieren Sie eine Direktive und lassen Sie $ eine Eigenschaft / einen Trigger beobachten, damit sie weiß, wann sie das Element fokussieren soll:

 Name:  

 app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) { return { //scope: true, // optionally create a child scope link: function (scope, element, attrs) { var model = $parse(attrs.focusMe); scope.$watch(model, function (value) { console.log('value=', value); if (value === true) { $timeout(function () { element[0].focus(); }); } }); // to address @blesh's comment, set attribute value to 'false' // on blur event: element.bind('blur', function () { console.log('blur'); scope.$apply(model.assign(scope, false)); }); } }; }]); 

Plunker

Das $ -Zeitlimit scheint notwendig zu sein, um die modale Zeit zum Rendern zu geben.

“2.” Jedes Mal, wenn sichtbar wird (z. B. durch Klicken auf eine Schaltfläche), stellen Sie den Fokus darauf ein.

Erstellen Sie eine Richtlinie im Wesentlichen wie oben. Beobachten Sie eine Bereichseigenschaft, und wenn sie wahr wird (setzen Sie sie in Ihrem ng-click-Handler), führen Sie das element[0].focus() . Abhängig von Ihrem Anwendungsfall benötigen Sie möglicherweise ein $ Timeout für dieses Beispiel:

  
{{ myInput }}

 app.directive('focusMe', function($timeout) { return { link: function(scope, element, attrs) { scope.$watch(attrs.focusMe, function(value) { if(value === true) { console.log('value=',value); //$timeout(function() { element[0].focus(); scope[attrs.focusMe] = false; //}); } }); } }; }); 

Plunker


Update 7/2013 : Ich habe ein paar Leute gesehen, die meine ursprünglichen isolate-Scope-Direktiven verwenden und dann Probleme mit eingebetteten Eingabefeldern haben (dh ein Eingabefeld im Modal). Eine Direktive ohne neuen scope (oder möglicherweise ein neuer Kindbereich) sollte einige der Schmerzen lindern. Also oben habe ich die Antwort aktualisiert, um keine isolierten Bereiche zu verwenden. Unten ist die ursprüngliche Antwort:

Ursprüngliche Antwort für 1., mit einem isolieren Bereich:

 Name:  

 app.directive('focusMe', function($timeout) { return { scope: { trigger: '@focusMe' }, link: function(scope, element) { scope.$watch('trigger', function(value) { if(value === "true") { $timeout(function() { element[0].focus(); }); } }); } }; }); 

Plunker .

Ursprüngliche Antwort für 2., mit einem isolieren Bereich:

  

 app.directive('focusMe', function($timeout) { return { scope: { trigger: '=focusMe' }, link: function(scope, element) { scope.$watch('trigger', function(value) { if(value === true) { //console.log('trigger',value); //$timeout(function() { element[0].focus(); scope.trigger = false; //}); } }); } }; }); 

Plunker .

Da wir die Eigenschaft trigger / focusInput in der Direktive zurücksetzen müssen, wird ‘=’ für die bidirektionale Datenbindung verwendet. In der ersten Richtlinie war “@” ausreichend. Beachten Sie auch, dass bei Verwendung von ‘@’ der Triggerwert mit ‘wahr’ verglichen wird, da @ immer zu einer Zeichenfolge führt.

(EDIT: Ich habe eine aktualisierte Lösung unterhalb dieser Erklärung hinzugefügt)

Mark Rajcok ist der Mann … und seine Antwort ist eine gültige Antwort, aber es hat einen Defekt (sorry Mark) …

… Versuchen Sie, den Booleschen Wert zu verwenden, um auf den Eingang zu fokussieren, und verwischen Sie dann den Eingang, und versuchen Sie dann, den Eingang erneut zu fokussieren. Es wird nicht funktionieren, wenn Sie den Boolean nicht auf false setzen, dann $ Digest, dann setzen Sie es zurück auf True. Selbst wenn Sie einen Zeichenfolgenvergleich in Ihrem Ausdruck verwenden, werden Sie gezwungen, die Zeichenfolge in etwas anderes zu ändern, $ digest, und ändern Sie sie dann zurück. (Dies wurde mit dem Blur Event-Handler behoben.)

Also schlage ich diese alternative Lösung vor:

Verwenden Sie ein Ereignis, das vergessene Merkmal von Angular.

JavaScript liebt Ereignisse überhaupt. Ereignisse sind von Natur aus lose gekoppelt, und noch besser, Sie vermeiden es, Ihrem $ Digest eine weitere $ watch hinzuzufügen.

 app.directive('focusOn', function() { return function(scope, elem, attr) { scope.$on(attr.focusOn, function(e) { elem[0].focus(); }); }; }); 

So, jetzt könntest du es so benutzen:

  

und dann überall in deiner App …

 $scope.addNewItem = function () { /* stuff here to add a new item... */ $scope.$broadcast('newItemAdded'); }; 

Das ist großartig, weil man mit so etwas alles machen kann. Zum einen können Sie Ereignisse verknüpfen, die bereits existieren. Zum anderen beginnen Sie mit etwas Intelligentem, indem Sie verschiedene Teile Ihrer App Ereignisse veröffentlichen, die andere Teile Ihrer App abonnieren können.

Jedenfalls schreit diese Art von Ding für mich “ereignisgesteuert”. Ich denke, als Angular-Entwickler versuchen wir wirklich, $ scope shaped pegs in Event-Shape-Löcher zu hämmern.

Ist es die beste Lösung? Ich weiß nicht. Es ist eine Lösung.


Aktualisierte Lösung

Nach @ ShimonRachlenkos Kommentar unten habe ich meine Methode geändert, dies etwas zu tun. Jetzt verwende ich eine Kombination aus einem Service und einer Direktive, die ein Ereignis “hinter den Kulissen” behandelt:

Ansonsten ist es das gleiche Prinzip wie oben beschrieben.

Hier ist eine kurze Demo Plunk

Verwendung

  
 app.controller('MyCtrl', function($scope, focus) { focus('focusMe'); }); 

Quelle

 app.directive('focusOn', function() { return function(scope, elem, attr) { scope.$on('focusOn', function(e, name) { if(name === attr.focusOn) { elem[0].focus(); } }); }; }); app.factory('focus', function ($rootScope, $timeout) { return function(name) { $timeout(function (){ $rootScope.$broadcast('focusOn', name); }); } }); 

Ich habe einige der anderen Antworten als zu kompliziert empfunden, wenn Sie nur das brauchen

 app.directive('autoFocus', function($timeout) { return { restrict: 'AC', link: function(_scope, _element) { $timeout(function(){ _element[0].focus(); }, 0); } }; }); 

Nutzung ist

  

Wir benutzen das Timeout, um Dinge im dom rendern zu lassen, obwohl es null ist, es wartet zumindest darauf – so funktioniert das in modals und was auch nicht

HTML hat einen Attribut- autofocus .

  

http://www.w3schools.com/tags/att_input_autofocus.asp

Sie können auch die in eckige integrierte jqlite-functionalität verwenden.

angular.element('.selector').trigger('focus');

Dies funktioniert gut und ein winkliger Weg, um die Eingabesteuerung zu fokussieren

 angular.element('#elementId').focus() 

Dies ist zwar keine rein eckige Art, die Aufgabe zu erledigen, aber die Syntax folgt dem eckigen Stil. Jquery spielt indirekt und direkt auf DOM mit Angular (jQLite => JQuery Light).

Falls erforderlich, kann dieser Code leicht in eine einfache angularanweisung eingefügt werden, in der das Element direkt zugänglich ist.

Ich denke nicht, $ Timeout ist eine gute Möglichkeit, das Element auf die Erstellung zu konzentrieren. Hier ist eine Methode, die eingebaute angularfunktionalität verwendet, die aus den trüben Tiefen der eckigen Dokumente ausgegraben wurde. Beachten Sie, wie das “link” -Attribut in “pre” und “post” aufgeteilt werden kann, für Pre-Link- und Post-Link-functionen.

Arbeitsbeispiel: http://plnkr.co/edit/Fj59GB

 // this is the directive you add to any element you want to highlight after creation Guest.directive('autoFocus', function() { return { link: { pre: function preLink(scope, element, attr) { console.debug('prelink called'); // this fails since the element hasn't rendered //element[0].focus(); }, post: function postLink(scope, element, attr) { console.debug('postlink called'); // this succeeds since the element has been rendered element[0].focus(); } } } }); 
    

Vollständige AngularJS-Richtlinie: https://docs.angularjs.org/api/ng/service/$compile

Ich habe eine Zwei-Wege-Bindungsfokus-Direktive geschrieben, genau wie das Modell in letzter Zeit.

Sie verwenden die Fokus-statement wie folgt:

  

Wenn Sie die Gültigkeitsbereich-Variable “ScopeFocusVariable” an einer beliebigen Stelle in Ihrem Controller auf true setzen, wird der Fokus für die Eingabe verwendet. Und wenn Sie Ihre Eingabe “verwischen”, wird someFocusVariable auf false gesetzt. Es ist wie Mark Rajcoks erste Antwort, aber mit Zwei-Wege-Bindung.

Hier ist die Richtlinie:

 function Ctrl($scope) { $scope.model = "ahaha" $scope.someFocusVariable = true; // If you want to focus initially, set this to true. Else you don't need to define this at all. } angular.module('experiement', []) .directive('focus', function($timeout, $parse) { return { restrict: 'A', link: function(scope, element, attrs) { scope.$watch(attrs.focus, function(newValue, oldValue) { if (newValue) { element[0].focus(); } }); element.bind("blur", function(e) { $timeout(function() { scope.$apply(attrs.focus + "=false"); }, 0); }); element.bind("focus", function(e) { $timeout(function() { scope.$apply(attrs.focus + "=true"); }, 0); }) } } }); 

Verwendung:

 
An Input:
Focus!
someFocusVariable: {{ someFocusVariable }}
content: {{ model }}

Hier ist die Geige:

http://fiddle.jshell.net/ubenzer/9FSL4/8/

Hier ist meine ursprüngliche Lösung:

Plünderer

 var app = angular.module('plunker', []); app.directive('autoFocus', function($timeout) { return { link: function (scope, element, attrs) { attrs.$observe("autoFocus", function(newValue){ if (newValue === "true") $timeout(function(){element[0].focus()}); }); } }; }); 

Und der HTML:

   

Was es macht:

Es fokussiert die Eingabe so, wie sie mit ng-show sichtbar wird. Keine Verwendung von $ watch oder $ hier.

Für diejenigen, die Angular mit dem Bootstrap-Plugin verwenden:

http://angular-ui.github.io/bootstrap/#/modal

Sie können in das opened Versprechen der modalen Instanz einhaken:

 modalInstance.opened.then(function() { $timeout(function() { angular.element('#title_input').trigger('focus'); }); }); modalInstance.result.then(function ( etc... 

Anstatt eine eigene Direktive zu erstellen, können Sie einfach JavaScript-functionen verwenden, um einen Fokus zu erzielen.

Hier ist ein Beispiel.

In der HTML-Datei:

  

In einer Datei Javascript, in einem Controller zum Beispiel, wo Sie den Fokus aktivieren möchten:

 document.getElementById("myInputId").focus(); 

Nicht, um einen Zombie wieder auferstehen zu lassen oder meine eigene Direktive zu verstopfen (ok, genau das tue ich gerade):

https://github.com/hiebj/ng-focus-if

http://plnkr.co/edit/MJS3zRk079Mu72o5A9l6?p=preview

  (function() { 'use strict'; angular .module('focus-if', []) .directive('focusIf', focusIf); function focusIf($timeout) { function link($scope, $element, $attrs) { var dom = $element[0]; if ($attrs.focusIf) { $scope.$watch($attrs.focusIf, focus); } else { focus(true); } function focus(condition) { if (condition) { $timeout(function() { dom.focus(); }, $scope.$eval($attrs.focusDelay) || 0); } } } return { restrict: 'A', link: link }; } })(); 

Erstens, ein offizieller Weg, den Schwerpunkt zu setzen, ist die Roadmap für 1.1 . In der Zwischenzeit können Sie eine statement zum Implementieren des Einstellungsfokus schreiben.

Zweitens erfordert das Festlegen eines Fokus auf ein Objekt, nachdem es sichtbar geworden ist, derzeit eine Problemumgehung. Verzögern Sie einfach Ihren Aufruf von element focus () mit einem $timeout .

Da das gleiche controller-modifies-DOM-Problem für Fokus, Unschärfe und Auswahl existiert, schlage ich vor, eine ng-target Direktive zu haben:

   

Angular Thread hier: http://goo.gl/ipsx4 , und weitere Details hier gebloggt: http://goo.gl/4rdZa

Die folgende statement erstellt eine .focus() function in Ihrem Controller, wie von Ihrem ng-target Attribut angegeben. (Es erstellt auch eine. .blur() und a. .select() .) Demo: http://jsfiddle.net/bseib/WUcQX/

Ich fand es nützlich, einen allgemeinen Ausdruck zu verwenden. Auf diese Weise können Sie beispielsweise den Fokus automatisch verschieben, wenn der eingegebene Text gültig ist

  

Oder automatisch fokussieren, wenn der Benutzer ein Feld fester Länge abschließt

  

Und natürlich Fokus nach Belastung

  

Der Code für die Richtlinie:

 .directive('mooFocusExpression', function ($timeout) { return { restrict: 'A', link: { post: function postLink(scope, element, attrs) { scope.$watch(attrs.mooFocusExpression, function (value) { if (attrs.mooFocusExpression) { if (scope.$eval(attrs.mooFocusExpression)) { $timeout(function () { element[0].focus(); }, 100); //need some delay to work with ng-disabled } } }); } } }; }); 

Wenn Sie nur einen einfachen Fokus haben wollten, der durch einen ng-Klick gesteuert wurde.

Html:

   

Richtlinie:

 'use strict' angular.module('focus',['ng']) .directive('utFocus',function($timeout){ return { link:function(scope,elem,attr){ var focusTarget = attr['utFocus']; scope.$watch(focusTarget,function(value){ $timeout(function(){ elem[0].focus(); }); }); } } }); 

Ein einfacher, der gut mit modals funktioniert:

 .directive('focusMeNow', ['$timeout', function ($timeout) { return { restrict: 'A', link: function (scope, element, attrs) { $timeout(function () { element[0].focus(); }); } }; }]) 

Beispiel

  

Sie könnten einfach eine Direktive erstellen, die den Fokus auf das dekorierte Element von postLinking legt:

 angular.module('directives') .directive('autoFocus', function() { return { restrict: 'AC', link: function(_scope, _element) { _element[0].focus(); } }; }); 

Dann in deinem HTML:

    

Dies würde für modals und ng-if getoggelte Elemente funktionieren, nicht für ng-show, da postLinking nur bei der HTML-Verarbeitung stattfindet.

Mark und Blesh haben großartige Antworten; Allerdings hat Mark einen Fehler, den Blesh hervorhebt (abgesehen davon, dass er komplex zu implementieren ist), und ich denke, dass Bleshs Antwort einen semantischen Fehler bei der Erstellung eines Dienstes hat, der speziell Fokus-Anfragen an das Frontend sendet, wenn wirklich alles was er benötigt Verzögern Sie das Ereignis, bis alle Richtlinien zuhören.

Also hier ist, was ich getan habe, was eine Menge von Bleshs Antwort stiehlt, aber die Semantik des Controller-Ereignisses und des “After-Load” -Dienstes getrennt hält.

Dies ermöglicht, dass das Controller-Ereignis leicht an andere Dinge angeschlossen werden kann, als nur ein spezifisches Element zu fokussieren, und es erlaubt auch, den Overhead der “After-Load” -function nur dann zu übernehmen, wenn es benötigt wird, was in vielen Fällen nicht der Fall ist.

Verwendung

  
 app.controller('MyCtrl', function($scope, afterLoad) { function notifyControllerEvent() { $scope.$broadcast('controllerEvent'); } afterLoad(notifyControllerEvent); }); 

Quelle

 app.directive('focusOn', function() { return function(scope, elem, attr) { scope.$on(attr.focusOn, function(e, name) { elem[0].focus(); }); }; }); app.factory('afterLoad', function ($rootScope, $timeout) { return function(func) { $timeout(func); } }); 

Dies ist auch möglich, um ngModelController zu verwenden. Arbeiten mit 1.6+ (bei älteren Versionen nicht bekannt).

HTML

 

JS

 $scope.myForm.myText.$$element.focus(); 

Hinweis: Je nach Kontext müssen Sie möglicherweise eine Timeout-function einfügen.

NB²: Bei Verwendung von controllerAs ist das fast gleich. Ersetzen Sie einfach name="myForm" mit name="vm.myForm" und in JS, vm.myForm.myText.$$element.focus(); .

Wahrscheinlich die einfachste Lösung im ES6-Zeitalter.

Durch das Hinzufügen der folgenden Liner-statement wird das HTML-Attribut “Autofokus” auf Angular.js wirksam.

 .directive('autofocus', ($timeout) => ({link: (_, e) => $timeout(() => e[0].focus())})) 

Jetzt können Sie einfach die HTML5-Autofokussyntax wie folgt verwenden:

  

Nur ein Neuling hier, aber ich war in der Lage, es in einem ui.bootstrap.modal mit dieser Direktive arbeiten zu lassen:

 directives.directive('focus', function($timeout) { return { link : function(scope, element) { scope.$watch('idToFocus', function(value) { if (value === element[0].id) { $timeout(function() { element[0].focus(); }); } }); } }; }); 

und in der $ modal.open-Methode habe ich die folgende statement verwendet, um das Element anzugeben, auf das der Fokus gesetzt werden soll:

 var d = $modal.open({ controller : function($scope, $modalInstance) { ... $scope.idToFocus = "cancelaAteste"; } ... }); 

Auf der Vorlage habe ich folgendes:

  

Ich bearbeite ‘Mark Rajcok’ focusMe Direktive, um für mehrere Fokus in einem Element zu arbeiten.

HTML:

  

im AngularJs Controller:

 $scope.myInputFocus= true; 

AngulaJS-Richtlinie:

 app.directive('focusMe', function ($timeout, $parse) { return { link: function (scope, element, attrs) { var model = $parse(attrs.focusMe); scope.$watch(model, function (value) { if (value === true) { $timeout(function () { scope.$apply(model.assign(scope, false)); element[0].focus(); }, 30); } }); } }; }); 

Die folgende Richtlinie hat den Trick für mich getan. Verwenden Sie das gleiche Autofokus-HTML-Attribut für die Eingabe.

 .directive('autofocus', [function () { return { require : 'ngModel', restrict: 'A', link: function (scope, element, attrs) { element.focus(); } }; }]) 

Wenn Sie modalInstance verwenden und über das Objekt verfügen, können Sie “then” verwenden, um nach dem Öffnen des Modals Aktionen auszuführen. Wenn Sie die modalInstance nicht verwenden und fest codiert sind, um das Modal zu öffnen, können Sie das Ereignis verwenden. Das $ Timeout ist keine gute Lösung.

Sie können tun (Bootstrap3):

 $("#" + modalId).on("shown.bs.modal", function() { angular.element("[name='name']").focus(); }); 

Bei ModalInstance können Sie in der Bibliothek nachlesen, wie der Code nach dem Öffnen von Modal ausgeführt wird.

Verwenden Sie $ timeout nicht so, das $ timeout kann 0, 1, 10, 30, 50, 200 oder mehr sein, dies hängt vom Client-Computer und dem process ab, um Modal zu öffnen.

Benutze $ timeout nicht, lass die Methode dir sagen, wann du fokussieren kannst;)

Ich hoffe, dass diese Hilfe! 🙂

Alle vorherigen Antworten funktionieren nicht, wenn das gewünschte Fokuselement in eine Richtlinienvorlage eingefügt wird. Die folgende Direktive passte sowohl zum einfachen Element als auch zum injizierten Element (ich schrieb es in Typoskript ). es akzeptiert den Selektor für das innere fokussierbare Element. Wenn Sie nur das self-Element fokussieren müssen – senden Sie keine Selector-Parameter an die Direktive:

 module APP.Directives { export class FocusOnLoadDirective implements ng.IDirective { priority = 0; restrict = 'A'; constructor(private $interval:any, private $timeout:any) { } link = (scope:ng.IScope, element:JQuery, attrs:any) => { var _self = this; var intervalId:number = 0; var clearInterval = function () { if (intervalId != 0) { _self.$interval.cancel(intervalId); intervalId = 0; } }; _self.$timeout(function(){ intervalId = _self.$interval(function () { let focusableElement = null; if (attrs.focusOnLoad != '') { focusableElement = element.find(attrs.focusOnLoad); } else { focusableElement = element; } console.debug('focusOnLoad directive: trying to focus'); focusableElement.focus(); if (document.activeElement === focusableElement[0]) { clearInterval(); } }, 100); scope.$on('$destroy', function () { // Make sure that the interval is destroyed too clearInterval(); }); }); }; public static factory = ():ng.IDirectiveFactory => { let directive = ($interval:any, $timeout:any) => new FocusOnLoadDirective($interval, $timeout); directive.$inject = ['$interval', '$timeout']; return directive; }; } angular.module('common').directive('focusOnLoad', FocusOnLoadDirective.factory()); 

}

Verwendungsbeispiel für einfaches Element:

  

Verwendungsbeispiel für inneres Element (normalerweise für dynamisch injiziertes Element wie Direktive mit Vorlage):

  

Sie können einen beliebigen jQuery-Selektor anstelle von “input” verwenden

Es ist einfach .. versuche es

html

  

Javascript

 document.getElementById("ddl00").focus(); 

Ich möchte zu dieser Diskussion beitragen, nachdem ich nach einer besseren Lösung gesucht und sie nicht gefunden habe, sondern sie stattdessen erstellen muss.

Kriterien: 1. Die Lösung sollte unabhängig vom scope des übergeordneten Controllers sein, um die Wiederverwendbarkeit zu erhöhen. 2. Vermeiden Sie die Verwendung von $ watch, um einige Bedingungen zu überwachen, dies ist sowohl langsam, erhöht die Digest-Schleife und macht das Testen schwieriger. 3. Vermeiden Sie $ timeout oder $ scope. $ Apply () um eine Digest-Schleife auszulösen. 4. Ein Eingabeelement befindet sich innerhalb des Elements, in dem die Richtlinie offen verwendet wird.

Das ist die Lösung, die mir am besten gefallen hat:

Richtlinie:

 .directive('focusInput', [ function () { return { scope: {}, restrict: 'A', compile: function(elem, attr) { elem.bind('click', function() { elem.find('input').focus(); }); } }; }]); 

Html:

  

Ich hoffe, das wird jemandem da draußen helfen!

Ich halte die Richtlinie für unnötig. Use HTML id and class attributes to select the required element and have the service use document.getElementById or document.querySelector to apply focus (or jQuery equivalents).

Markup is standard HTML/angular directives with added id/classes for selection

  

Controller broadcasts event

 $scope.$emit('ui:focus', '#myInput'); 

In UI service uses querySelector – if there are multiple matches (say due to class) it will only return the first

 $rootScope.$on('ui:focus', function($event, selector){ var elem = document.querySelector(selector); if (elem) { elem.focus(); } }); 

You may want to use $timeout() to force a digest cycle

Just throwing in some coffee.

 app.directive 'ngAltFocus', -> restrict: 'A' scope: ngAltFocus: '=' link: (scope, el, attrs) -> scope.$watch 'ngAltFocus', (nv) -> el[0].focus() if nv 

Not sure if relying on the timeout is a good idea, but this works for ng-repeat because this code runs AFTER angularjs updates the DOM, so you make sure all objects are there:

 myApp.directive('onLastRepeat', [function () { return function (scope, element, attrs) { if (scope.$last) setTimeout(function () { scope.$emit('onRepeatLast', element, attrs); }, 1); }; }]); //controller for grid myApp.controller('SimpleController', ['$scope', '$timeout', '$http', function ($scope, $timeout, $http) { var newItemRemoved = false; var requiredAlert = false; //this event fires up when angular updates the dom for the last item //it's observed, so here, we stop the progress bar $scope.$on('onRepeatLast', function (scope, element, attrs) { //$scope.complete(); console.log('done done!'); $("#txtFirstName").focus(); }); }]);