title: A general directive with a specific type (UI components inheritance)
body: <p>I'm working on a project to render HTML taking a special XML as input.
  I succeed already with the basic case. For example:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;mybutton name="layla"&gt;&lt;/mybutton&gt;
  </code></pre>
  
  <p>is converted to </p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;div class="btn"&gt;Layla&lt;/div&gt;
  </code></pre>
  
  <p>using a directive like</p>
  
  <pre class="lang-js prettyprint-override"><code>.directive('mybutton', function() {
      return {
          restrict: 'E',
          scope: {
              name: '@'
          },
          templateUrl: 'uicomponents/uiButton.html'
      }
  })
  </code></pre>
  
  <p>The real XML input I'll receive is:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;ui type="back_button" x="10.0" y="630.0"/&gt;
  </code></pre>
  
  <p>I'd like to avoid changing the XML syntax but it can be done if necessary.
  all screen components are in <code>&lt;ui&gt;&lt;/ui&gt;</code> tags. The <code>type</code> attribute defines the component.</p>
  
  <p>How would you write directives for this kind of tags? It doesn't seem smart to create one huge directive for <code>&lt;ui&gt;</code> elements and having a long switch-case inside for the attribute.</p>