title: AngularJS - Directive events and DOM rendering
body: <p>In the code below, I am trying to use a template (with <code>{{ value }}</code> 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>
  
  <p>I cannot use the style selector (which works fine), I need to use the div's id. In my real code I use a <code>templateUrl:</code>, not the inline code, but it has the same result.</p>
  
  <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>
  
  <p>Thanks in advance ...</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
     &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;My AngularJS App&lt;/title&gt;
        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body style="height:100%; width: 100%;"&gt;
        &lt;tls-window window-id="fred" window-width="600" window-label-width="150"&gt;&lt;/tls-window&gt;
        &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
        &lt;script src="js/app.js"&gt;&lt;/script&gt;
        &lt;script src="js/core/services.js"&gt;&lt;/script&gt;
        &lt;script src="js/core/controllers.js"&gt;&lt;/script&gt;
        &lt;script src="js/core/filters.js"&gt;&lt;/script&gt;
        &lt;script src="js/core/directives.js"&gt;&lt;/script&gt;
        &lt;script src="js/core/tlscore-directives.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
  
        var coreDirectives = angular.module('tlsCore.directives', []);
        coreDirectives.directive('tlsWindow', function() {
          return {
            restrict: 'E',
            scope: {
              windowId: '@windowId',
              windowWidth: '@windowWidth',
              labelWidth: '@windowLabelWidth'
            },
            replace: true,
            transclude: false,
            template: '&lt;div id="{{windowId}}" class="tls-window" ng-cloak tls-draggable &gt;' +
              '&lt;div id="{{windowId}}-winBackground" class="tls-window-background" style="width: 300px; height: 200px" &gt;' +
              '&lt;div id="{{windowId}}-winToolbarBackground" class="tls-window-toolbar-background"&gt;' +
              '&lt;div id="{{windowId}}-winToolbarContent" class="tls-window-toolbar-content" style="width: 300px; height: 100px"&gt;' +
              '&lt;/div&gt;' +
              '&lt;/div&gt;' +
              '&lt;/div&gt;',
            link: function(scope, element, attrs) {
              var ele = element.get(element.index(scope.windowId));
              // this works and sets the colour (by class)
              $('.tls-window-toolbar-content').css("background-color", 'red');
              // this does not work as the id of the element is not yet substituted and rendered ??
              $('#fred-winBackground').css("background-color", 'green');
            }
          }
        });   
  
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>