title: Angular - how do I keep from rendering template until an event fires?
body: <p>I have a directive that looks something like the code below.  It works fine, but I have had to resort to creating inline template code since I don't want the template to render until the click event has fired.  But it would be cleaner if I could assign the directive template and delay rendering until the event has fired.  </p>
  
  <p>Is there a way to do this?</p>
  
  <pre><code>(function() {
    app.directive("nodeTabset", function($compile) {
      return {
        restrict: "A",
        scope: '&amp;',
        controller: [
          '$scope', '$element', '$attrs', '$compile', function($scope, $element, $attrs, $compile) {
            var TABS;
  
            // Ad hoc template
            TABS = "&lt;div id='node-tabset-wrapper'&gt;\n  &lt;div id='node-tabset'&gt;\n    &lt;div&gt;Set Attribute&lt;/div&gt;\n    &lt;div ng-show='node.name == \"a\"'&gt;Set Scrape Job&lt;/div&gt;\n  &lt;/div&gt;\n  &lt;div id='node-tabset-corner'&gt;&lt;/div&gt;\n&lt;/div&gt;";
  
            $scope.selectNode = function(node) {
              node.addClass("selected");
              node.prepend(TABS);
              $compile(node.children()[0])($scope);
              return $scope.$apply();
            };
            return $scope.evaluateSelection = function($event) {
              var parent, 
              parent = angular.element($event.currentTarget).parent();
  
              // do some stuff
               return $scope.selectNode(parent);
            };
          }
        ],
        link: function(scope, element, attrs, controller) {
          return element.bind('click', scope.evaluateSelection);
        }
      };
    });
  
  }).call(this);
  </code></pre>