Donner le focus avec AngularJs ============================== ![category](web) ![tag](design) ![tag](angularjs) Objectif -------- Il est parfois difficile de pouvoir donner le focus sur un élément *après* chargement de la page. L'utilisation classique est que l'utilisateur sélectionne l'élément mais on peut forcer le focus Utilisation du module ng-focus-on --------------------------------- Installation ```bash bower install ng-focus-on ``` Utilisation intégration dans le fichier de l'application (app.js en général) ```javascript // ajout du module dans app var app = angular.module("Syrtem", ['focusOn',... ]); //utilisation dans le controller app.controller('AppController', function($scope, focus) { focus('focusone'); }); ``` l'utilisation de la directive au sein de l'application ```html ... ... ... ... ``` Intégration d'une directive personnelle --------------------------------------- La solution réside dans l'utilisation d'une directive app/directives/focusDirectives.js ```javascript app.directive('focusOn', function($timeout) { return { restrict : 'A', link : function($scope, $element, $attr) { $scope.$watch($attr.focusOn, function(_focusVal) { $timeout(function() { if (_focusVal) { $element.focus(); } else { $element.blur(); } }); }); } } }); ``` l'utilisation de la directive au sein de l'application ```html ... ... ... ... ``` Dans cette exemple, notre input aura le focus quand infocont.cab sera vrai.