{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"formly-focus","type":"basic","slug":"formly-focus","excerpt":"directive","body":"[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Even though you have access to use this directive, general use of angular-formly suggests that you shouldn't have to use it. This directive is automatically added by the `ngModelAttrsTemplateManipulator`. Note, because this is an internal directive, it's API is subject to change without a major version change. You've been warned!\",\n  \"title\": \"Internal Directive\"\n}\n[/block]\nThis is an attribute directive. It will watch the given value and focus the element when the given value is truthy. You can also optionally add a refocus attribute and this will cause focus to be returned to the previous element with focus when the formly-focus value is set to falsey (unless the user has clicked away from the focused element).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input ng-model=\\\"model[options.key]\\\"\\n       formly-focus=\\\"{{options.templateOptions.focus}}\\\"\\n       focus-wait=\\\"0\\\"\\n       refocus\\n       />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute Name\",\n    \"h-1\": \"Data Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"formly-focus\",\n    \"0-1\": \"string of `'true'` or `'false'`\",\n    \"0-2\": \"setting this value to `'true'` will focus on the element, setting it to `'false'` will blur the element (if it's still the `document.activeElement`).\",\n    \"1-0\": \"focus-wait\",\n    \"1-1\": \"string of integer\",\n    \"1-2\": \"There's a timeout setup for focusing the active element. Defaults to 0.\",\n    \"2-0\": \"refocus\",\n    \"2-1\": \"N/A\",\n    \"2-2\": \"Adding the `refocus` attribute will cause this directive to keep track of the previous element with focus and refocus on the previous one.\"\n  },\n  \"cols\": 3,\n  \"rows\": 3\n}\n[/block]\n**Note:** Here's an example of how to take full advantage of this directive in your field config. You'll notice that `focus-wait` and `refocus` isn't exactly straightforward. Please file an issue if you have a use-case for this and I can make it easier.\n[block:embed]\n{\n  \"html\": false,\n  \"url\": \"http://jsbin.com/dupivu/embed?output\",\n  \"title\": \"JS Bin\",\n  \"favicon\": \"http://static.jsbin.com/images/favicon.png\",\n  \"image\": \"http://static.jsbin.com/images/logo.png\",\n  \"iframe\": true\n}\n[/block]","updates":[],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"558cb2bd0b236c2500d37ce5","project":"5515ba4981faf83900d2b10c","createdAt":"2015-03-28T05:29:47.300Z","version":{"version":"6.16.0","version_clean":"6.16.0","codename":"","is_stable":false,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["558cb2bc0b236c2500d37cd5","558cb2bc0b236c2500d37cd6","558cb2bc0b236c2500d37cd7","558cb2bc0b236c2500d37cd8","558cb2bc0b236c2500d37cd9","558cb2bc0b236c2500d37cda"],"_id":"558cb2bc0b236c2500d37cd4","project":"5515ba4981faf83900d2b10c","releaseDate":"2015-06-26T02:02:36.211Z","__v":1,"createdAt":"2015-06-26T02:02:36.211Z","forked_from":"558a9c9f8d30cb2300873ecd"},"category":{"sync":{"isSync":false,"url":""},"pages":["558cb2bd0b236c2500d37ce4","558cb2bd0b236c2500d37ce5"],"title":"Internal API","slug":"internal-api","order":4,"from_sync":false,"reference":false,"_id":"558cb2bc0b236c2500d37cda","project":"5515ba4981faf83900d2b10c","version":"558cb2bc0b236c2500d37cd4","__v":1,"createdAt":"2015-03-28T05:10:32.768Z"},"__v":0,"user":"54e3723b8ef7552300409bf4","githubsync":""}

Guides

Community

Template Libraries

API

Internal API

Other Info

formly-focus

directive
[block:callout] { "type": "warning", "body": "Even though you have access to use this directive, general use of angular-formly suggests that you shouldn't have to use it. This directive is automatically added by the `ngModelAttrsTemplateManipulator`. Note, because this is an internal directive, it's API is subject to change without a major version change. You've been warned!", "title": "Internal Directive" } [/block] This is an attribute directive. It will watch the given value and focus the element when the given value is truthy. You can also optionally add a refocus attribute and this will cause focus to be returned to the previous element with focus when the formly-focus value is set to falsey (unless the user has clicked away from the focused element). [block:code] { "codes": [ { "code": "<input ng-model=\"model[options.key]\"\n formly-focus=\"{{options.templateOptions.focus}}\"\n focus-wait=\"0\"\n refocus\n />", "language": "html" } ] } [/block] [block:parameters] { "data": { "h-0": "Attribute Name", "h-1": "Data Type", "h-2": "Description", "0-0": "formly-focus", "0-1": "string of `'true'` or `'false'`", "0-2": "setting this value to `'true'` will focus on the element, setting it to `'false'` will blur the element (if it's still the `document.activeElement`).", "1-0": "focus-wait", "1-1": "string of integer", "1-2": "There's a timeout setup for focusing the active element. Defaults to 0.", "2-0": "refocus", "2-1": "N/A", "2-2": "Adding the `refocus` attribute will cause this directive to keep track of the previous element with focus and refocus on the previous one." }, "cols": 3, "rows": 3 } [/block] **Note:** Here's an example of how to take full advantage of this directive in your field config. You'll notice that `focus-wait` and `refocus` isn't exactly straightforward. Please file an issue if you have a use-case for this and I can make it easier. [block:embed] { "html": false, "url": "http://jsbin.com/dupivu/embed?output", "title": "JS Bin", "favicon": "http://static.jsbin.com/images/favicon.png", "image": "http://static.jsbin.com/images/logo.png", "iframe": true } [/block]