AngularJS - Eingang Autofokus mit ng, wenn nicht

Arbeits

Wenn ich meine input mit ng-if umgeben, nach Verstecken und Zeigen des autofocus Attribut Effekt nicht nehmen:AngularJS - Eingang Autofokus mit ng, wenn nicht

Hier ist der Code:

<!DOCTYPE html> 
<html ng-app> 

    <head> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-init="view={}; view.show = true"> 
    <button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button> 
    <div ng-if="view.show"> 
     <input autofocus /> 
    </div> 
    </body> 
</html>

Und Hier ist der Plünderer: http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview

Klicken Sie einfach auf ausblenden und danach auf der Show und Sie werden sehen, der Autofokus funktioniert nicht!

In Chrome arbeitet nur auf der ersten Show in FF und IE es gar nicht funktioniert!

Quelle

2016-03-28 cheziHoyzer

Das Problem ist das Attribut autofocus ist nicht eine Angular-Direktive. Es ist ein browser supported specification of the <input> element. Wenn Sie möchten, dass dies über mehrere Browser hinweg wie gewünscht funktioniert und Sie jedes Mal, wenn Sie auf Verbergen/Anzeigen klicken, automatisch fokussieren, müssen Sie eine Anweisung erstellen.

Ich nahm diese Richtlinie direkt aus Github Gist, Kredit mlynch für den Aufbau dieser Richtlinie.

Heres ein funktionierendes Beispiel für die Anwendung

angular 
 
    .module('App', [ 
 
     'utils.autofocus', 
 
    ]); 
 
    
 
/** 
 
* the HTML5 autofocus property can be finicky when it comes to dynamically loaded 
 
* templates and such with AngularJS. Use this simple directive to 
 
* tame this beast once and for all. 
 
* 
 
* Usage: 
 
* <input type="text" autofocus> 
 
* 
 
* License: MIT 
 
*/ 
 
angular.module('utils.autofocus', []) 
 

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

<!DOCTYPE html> 
 
<html ng-app="App"> 
 

 
    <head ng-init="view={}; view.show = true"> 
 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    </head> 
 

 
    <body> 
 
    <button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button> 
 
    </body> 
 
    
 
    <div ng-if="view.show"> 
 
    <input autofocus /> 
 
    </div> 
 

 
    <script src="script.js"></script> 
 
</html>

Quelle

2016-03-28 10:13:05

Ich möchte eine Sache zu Ihrer Lösung hinzufügen - Präfix für die Richtlinie. Wie die Registrierung als 'abcAutofocus' in' directive (...) 'als Verwendung von 'abc-autofocus' in der HTML-Vorlage, um zu vermeiden, dass eine verwirrende Lösung verwendet wird - reine HTML- oder Angular-Anweisung. –

Greaaaaaat Lösung. Vielen Dank –

-1

Zuerst müssen Sie das div und seinen Inhalt in das body-Element einfügen. Du hast es draußen. bitte korrigiere es.

Eingabeelement sollte nicht leer sein und manchmal nicht funktionieren. Bitte fügen Sie weitere Attribute hinzu wie Name und type = "Text" oder geeignet. Dies ist html5-Funktion und sollte mit < starten! DOCTYPE html>.

Bitte beachten Sie: The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.visit here for more details

Quelle

2016-03-28 10:09:48

die Demo Fest, das ist nicht das Problem, auf IE11 getestet. Sie können es testen. es funktioniert nicht – cheziHoyzer

Sie eine Richtlinie für diese verwenden können. Plunker Demo

angular.module('myApp', []).directive('focusMe', function($timeout) { 
    return { 
     scope: { 
      focusMeIf:"=" 
     }, 
     link: function (scope, element, attrs) { 
      if (scope.focusMeIf===undefined || scope.focusMeIf) { 
       $timeout(function() { element[0].focus(); }); 
      } 
     } 
    }; 
});

könnten Sie auch eine Bedingung darin in focus-me-if Attribut darin definieren.

Ich hoffe, es hilft.

Quelle

2016-03-28 10:10:47

AngularJS - Eingang Autofokus mit ng, wenn nicht

Antwort

Verwandte Themen