{"_id":"56d91c5707ae190b00004477","category":{"_id":"56d91c5507ae190b00004468","project":"5515ba4981faf83900d2b10c","version":"56d91c5507ae190b00004460","__v":1,"pages":["56d91c5707ae190b00004477","56d91c5707ae190b00004478"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-03-28T05:10:32.768Z","from_sync":false,"order":4,"slug":"internal-api","title":"Internal API"},"version":{"_id":"56d91c5507ae190b00004460","__v":1,"project":"5515ba4981faf83900d2b10c","createdAt":"2016-03-04T05:25:41.052Z","releaseDate":"2016-03-04T05:25:41.052Z","categories":["56d91c5507ae190b00004464","56d91c5507ae190b00004465","56d91c5507ae190b00004466","56d91c5507ae190b00004467","56d91c5507ae190b00004468"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"8.0.0","version":"8.0.0"},"user":"54e3723b8ef7552300409bf4","__v":0,"project":"5515ba4981faf83900d2b10c","updates":["56b250a43b6f690d00bdb709"],"next":{"pages":[],"description":""},"createdAt":"2015-03-28T05:29:47.300Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":33,"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]","excerpt":"directive","slug":"formly-focus","type":"basic","title":"formly-focus"}

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]