{"id":1789,"date":"2022-08-30T15:19:27","date_gmt":"2022-08-30T15:19:27","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/angularjs-directive-events-and-dom-rendering-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:27","modified_gmt":"2022-08-30T15:19:27","slug":"angularjs-directive-events-and-dom-rendering-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/angularjs-directive-events-and-dom-rendering-collection-of-common-programming-errors\/","title":{"rendered":"AngularJs &#8211; Directive events and dom rendering-Collection of common programming errors"},"content":{"rendered":"<p>In the code below, I am trying to use a template (with {{ value }} substitution) but I have been trying for two days to find a way of getting to the rendered code to set some properties on it.<\/p>\n<p>I cannot use the style selector (which works fine), I need to use the div&#8217;s id. In my real code I use a templateUrl: not the inline code, but it has the same result.<\/p>\n<p>Which event should I be listening for? At what point in time will the selectors work? I have read about compiling and linking and think the answer is out there somewhere?<\/p>\n<p>Thanks in advance &#8230;<\/p>\n<pre><code>\n\n\n  \n  My AngularJS App\n\n  \n\n\n\n\n\n    \n\n  \n  \n  \n  \n  \n  \n\n  \n\n\n\nvar coreDirectives = angular.module('tlsCore.directives', []);\n\ncoreDirectives.directive('tlsWindow', function() {\n  return {\n    restrict: 'E',\n    scope:  {\n        windowId: '@windowId',\n        windowWidth: '@windowWidth',\n        labelWidth: '@windowLabelWidth'\n    },\n    replace: true,\n    transclude: false,\n    template: '  ' +\n        '' +\n            '' +\n                '' +\n                '' +\n            '' +\n        '',\n    link: function (scope, element, attrs) {\n\n        var ele = element.get(element.index(scope.windowId));\n\n        \/\/ this works and sets the colour (by class)\n        $('.tls-window-toolbar-content').css (\"background-color\",  'red');\n\n        \/\/ this does not work as the id of the element is not yet substituted and rendered ??\n        $('#fred-winBackground').css (\"background-color\",  'green');\n\n    }   \n  }\n}); \n\n\n\n\n\n<\/code><\/pre>\n<ol>\n<li>\n<p>Instead of using the <code>template<\/code> method, move the HTML into the <code>link<\/code> method. This enables us to manually <code>$interpolate<\/code> the bracketed terms before compiling, and then use the ID selector. Note that this would not be possible without using the <code>=<\/code> instead of <code>@<\/code> isolate scope binding, because <code>@<\/code> bindings are postponed until later and are undefined in the <code>link<\/code> method (See more on that here).<\/p>\n<pre><code>app.directive('tlsWindow', function($interpolate,$compile) {\n  return {\n    restrict: 'E',\n    scope: {\n        windowId: '=',\n        windowWidth: '=',\n        labelWidth: '='\n    },\n    link: function (scope, element, attrs) {\n        var template = '' +\n        '' +\n            '' +\n                '' +\n                '' +\n            '' +\n        '';\n\n        var interpolated = $interpolate(template)(scope);\n        var html = $(interpolated);\n        element.replaceWith($compile(html)(scope));\n\n        $('.tls-window-toolbar-content').css('background-color', 'red');\n        $('#fred-winBackground').css('background-color', 'green');\n    }   \n  }\n}); \n<\/code><\/pre>\n<p>Here is a fiddle<\/p>\n<p>Not the most robust solution but this would work also. Here the manipulation is postponed until after the rendering by using <code>$timeout<\/code>. This causes a slight delay as well.<\/p>\n<pre><code>$timeout(function(){\n    $('#fred-winBackground').css(\"background-color\", 'green');\n},0);\n<\/code><\/pre>\n<p>This requires <code>$timeout<\/code> to be injected into the directive as well.<\/p>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-12-02 01:31:31. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>In the code below, I am trying to use a template (with {{ value }} substitution) but I have been trying for two days to find a way of getting to the rendered code to set some properties on it. I cannot use the style selector (which works fine), I need to use the div&#8217;s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1789","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1789","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=1789"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1789\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}