Created
March 12, 2015 10:19
-
-
Save dcz-switcher/060323ebac9436dcc66b to your computer and use it in GitHub Desktop.
angular set focus on input field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" ng-app="focusDemo"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| </head> | |
| <body ng-controller="mainController as mainCtrl"> | |
| <h1>{{mainCtrl.title}}</h1> | |
| <div> | |
| <div mx-input focus="mainCtrl.focus"></div> | |
| </div> | |
| <div> | |
| <button ng-click="mainCtrl.focus = true">click pour mettre le focus</button> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> | |
| <script> | |
| (function () { | |
| angular.module('focusDemo', []) | |
| .directive('mxInput', [function () { | |
| return { | |
| template : "<input type='text' focus>", | |
| scope : {focus : '='}, | |
| link: function (scope, element) { | |
| scope.$watch('focus', function (val) { | |
| if (val == true) { | |
| element[0].querySelector('input').focus(); | |
| } | |
| }); | |
| } | |
| } | |
| }]) | |
| .controller('mainController', [function () { | |
| this.title = "focus sur élément avec angularJS"; | |
| this.focus = false; | |
| }]); | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment