AngularJS : comment mettre un focus sur un champ input ?
Pour mettre un focus sur un champ dans AngularJS, il faut définir une directive et faire surveiller cette propriété.
Pour mettre un focus sur un champ dans AngularJS lorsqu'une fenêtre modale s'ouvre à l'écran, il faut définir une directive et faire surveiller cette propriété pour que le framework sache quand attribuer le focus sur l'élément. Pour créer une directive, il faut ajouter un attribut sur l'élément :
Name: <input type=text focus-me=shouldBeOpen>
Il faut ensuite ajouter la directive et lui indiquer de surveiller cette propriété pour la mettre à true quand c'est nécessaire :
app.directive('focusMe', function($timeout, $parse) {
return {
//scope: true, // créer un scope enfant (optionnel)
link: function(scope, element, attrs) {
//Récupération du modèle
var model = $parse(attrs.focusMe);
//On indique à la directive de surveiller la propriété
scope.$watch(model, function(value)
{
console.log('value=',value);
if(value === true)
{
//La méthode $timeout est utilisée pour laisser le temps à la fenêtre modale de s'afficher
$timeout(function() {
element[0].focus();
});
}
});
// Cette portion de code permet de gérer l'événement blur : la propriété est fixée à false.
element.bind('blur', function() {
console.log('blur');
scope.$apply(model.assign(scope, false));
});
}
};
});
On peut modifier ce code pour que le focus se fasse lorsque l'on clique sur un bouton. On crée une propriété que l'on surveille avec une directive. Lorsqu'elle a sa valeur égale à true, on met le focus sur un élément. On utilise ensuite l'attribut ng-click du bouton pour fixer la valeur de la propriété à true.
<!-- HTML (ce code affiche également le formulaire dans une fenêtre modale) -->
<button class=btn ng-click=showForm=true; focusInput=true>show form and
focus input</button>
<div ng-show=showForm>
<input type=text ng-model=myInput focus-me=focusInput> {{ myInput }}
<button class=btn ng-click=showForm=false>hide form</button>
</div>
//JavaScript
app.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.focusMe, function(value) {
if(value === true) {
console.log('value=',value);
element[0].focus();
scope[attrs.focusMe] = false;
}
});
}
};
});