{"id":1772,"date":"2022-08-30T15:19:19","date_gmt":"2022-08-30T15:19:19","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/angularjs-setting-focus-to-element-using-non-isolate-directive-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:19","modified_gmt":"2022-08-30T15:19:19","slug":"angularjs-setting-focus-to-element-using-non-isolate-directive-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/angularjs-setting-focus-to-element-using-non-isolate-directive-collection-of-common-programming-errors\/","title":{"rendered":"AngularJS &#8211; setting focus to element using NON-ISOLATE directive-Collection of common programming errors"},"content":{"rendered":"<p>I know this question has been asked about 100 times (trust me, I&#8217;ve read them all), but I&#8217;m having trouble getting focus to go to an input box when the directive does NOT use isolate scope. The scope.$watch doesn&#8217;t fire when the backing data changes.<\/p>\n<p>Why not just use the one with isolate scope, you ask? Well, my understanding is that you should ONLY use isolate scope if your directive has a template.<\/p>\n<p>The only differences in the directives is:<\/p>\n<pre><code>\/\/ works\napp.directive('doesFocus', function ($timeout) {\n    return {\n        scope: { trigger: '@doesFocus' },\n        link: function (scope, element) {\n            scope.$watch('trigger', function (value) {\n              \/\/ sets focus\n            }\n            ...\n\n\/\/ does not work, and in fact when I inspect attrs.doesNotFocus it is undefined\napp.directive('doesNotFocus', function ($timeout) {\n    return {\n        scope: false,\n        link: function (scope, element, attrs) {\n            scope.$watch(attrs.doesNotFocus, function (value) {\n              \/\/ sets focus\n            }\n            ...\n<\/code><\/pre>\n<p>I&#8217;m on week 3 of using Angular, so I must be missing some silly semantic issue.<\/p>\n<p>Here is a fiddle illustrating my issue. http:\/\/jsfiddle.net\/tpeiffer\/eAFmJ\/<\/p>\n<p><strong>EDIT<\/strong><\/p>\n<p>My actual problem was that my real code was like this (hazard of mocking the problem, you sometimes mask the real problem):<\/p>\n<pre><code>\n<\/code><\/pre>\n<p>but because I was using a function, not a property, I was missing the required ticks<\/p>\n<pre><code>\n<\/code><\/pre>\n<p>Making this change fixed the problem and my directive can still be like this:<\/p>\n<pre><code>scope.$watch(attrs.shouldFocus, focusCallback(newValue));\n<\/code><\/pre>\n<p><strong>END EDIT<\/strong><\/p>\n<p>Thanks for helping me in my quest for angular excellence!<\/p>\n<p>Thad<\/p>\n<ol>\n<li>\n<p>Your bottom drawer was watching a function <code>isDrawerOpen()<\/code>, not a property.<br \/>\nChange<\/p>\n<pre><code>   scope.$watch('isDrawerOpen()',...);\n<\/code><\/pre>\n<p>to<\/p>\n<pre><code>   scope.$watch('toggleBottomDrawer',...);\n<\/code><\/pre>\n<\/li>\n<li>\n<p>Remove <code>{{}}<\/code> from your HTML. So instead of:<\/p>\n<pre><code>\n<\/code><\/pre>\n<p>use<\/p>\n<pre><code>\n<\/code><\/pre>\n<p>Then it works with watching <code>attrs.doesNotFocus<\/code>:<\/p>\n<pre><code>scope.$watch(attrs.doesNotFocus, function (value) {...} );\n<\/code><\/pre>\n<p>Fiddle<\/p>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-12-02 01:21:03. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I know this question has been asked about 100 times (trust me, I&#8217;ve read them all), but I&#8217;m having trouble getting focus to go to an input box when the directive does NOT use isolate scope. The scope.$watch doesn&#8217;t fire when the backing data changes. Why not just use the one with isolate scope, you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1],"tags":[],"class_list":["post-1772","post","type-post","status-publish","format-standard","hentry","category-semantic","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1772"}],"version-history":[{"count":1,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1772\/revisions"}],"predecessor-version":[{"id":8805,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1772\/revisions\/8805"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}