Nested directive, where child directive is based on parent attribute
<p>Is it possible to "tell" a directive to use another specific directive, based on the attributes provided to the first directive?</p>

<p>An example:</p>

<p>Let's say i have the following HTML</p>

<pre><code>&lt;parent-directive child-type="foo" /&gt;
</code></pre>

<p>And the following directive</p>

<pre><code>.directive('parentDirective', function () {
  return {
    restrict: 'E',
    scope: {
      childType: '@'
    },
    templateUrl: 'parent.html'
  };
});
</code></pre>

<p>Where <code>parent.html</code> is</p>

<pre><code>&lt;!-- some html --&gt;
&lt;{{childType}} /&gt;
&lt;!-- some more html --&gt;
</code></pre>

<p>and the <code>foo</code> directive</p>

<pre><code>.directive('foo', function () {
  return {
    restrict: 'E',
    scope: {
    },
    templateUrl: 'foo.html'
  };
});
</code></pre>

<p>The above is not possible, since the directives is handled in two phases, and the <code>childType</code> isn't linked until the second phase, the link phase. Is there another way, where i can do this?</p>

<p>The goal here is to use directives to display some custom bootstrap modals, where the header and footer of the modals are the same, but the body should be inserted using a set of different directives.</p>

<p>Thanks</p>