Angular - 如何在事件触发之前保持渲染模板

我有一个类似于以下代码的指令。 它工作正常，但我不得不求助于创建内联模板代码，因为我不希望模板在触发 click 事件之前呈现。 但是，如果我可以分配指令模板并延迟渲染直到事件触发，那会更干净。

有没有办法做到这一点？

(function() {
  app.directive("nodeTabset", function($compile) {
    return {
      restrict: "A",
      scope: '&',
      controller: [
        '$scope', '$element', '$attrs', '$compile', function($scope, $element, $attrs, $compile) {
          var TABS;
          // Ad hoc template
          TABS = "<div id='node-tabset-wrapper'>'n  <div id='node-tabset'>'n    <div>Set Attribute</div>'n    <div ng-show='node.name == '"a'"'>Set Scrape Job</div>'n  </div>'n  <div id='node-tabset-corner'></div>'n</div>";
          $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);