title: Angular directive manual compile in link function + transclude
body: <p>I'm in need of doing transclusion together with manual compilation in link function and I'm wondering if there is a better way than what I'm pasting below as "Dynamic". It seems to be working but I'm not sure what are the consequences of removing <code>ng-transclude</code> attribute and I'm removing it due to Angular complaining to <code>Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: &lt;div ng-transclude=""&gt;</code>.</p>
  
  <p>Bottom-line is that I need to provide different templates for different instances of this directive with fallback to generic ones.</p>
  
  <p>I can't use compile part. Here I have just simple example but I have also other cases with big link function that I would rather don't want to convert as this should be just "golden bullet" type of adjustment.</p>
  
  <p>This little guy can be found here <a href="https://github.com/institut-de-genomique/Ultimate-DataTable/blob/master/src/directives/udt-form.js" rel="nofollow">https://github.com/institut-de-genomique/Ultimate-DataTable/blob/master/src/directives/udt-form.js</a> in original form.</p>
  
  <h3>Original</h3>
  
  <pre><code>angular.module('ultimateDataTableServices')
    .directive('udtForm', function () {
      return {
        restrict: 'A',
        replace:true,
        transclude:true,
        templateUrl:'udt-form.html',
        link: function(scope, element, attr) {
        }
      };
    });
  </code></pre>
  
  <h3>Dynamic</h3>
  
  <pre><code>angular.module('ultimateDataTableServices')
    .directive('udtForm', ['$compile', '$templateCache', function ($compile, $templateCache) {
      return {
        restrict: 'A',
        transclude:true,
        link: function(scope, element, attr, ctrls, transclude) {
          var tplName = 'udt-form.html',
            tplPath = scope.udtTable.configMaster.templates[tplName] || scope.udtTable.configMaster.templatesMaster[tplName] || tplName,
            elem = angular.element($templateCache.get(tplPath));
  
          elem.find('[ng-transclude]').removeAttr('ng-transclude').append(transclude());
  
          element.replaceWith($compile($templateCache.get(tplPath))(scope));
        }
      };
    }]);
  </code></pre>
  
  <p>TIA!</p>