Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Unfortunately, you cannot save names of directives in string variables and access them in the HTML. You can, however, save a string in a variable in <code>$scope</code> and <a href="http://docs.angularjs.org/api/ng.directive%3angSwitch" rel="nofollow">use <code>ng-switch</code></a> to <em>select</em> the correct directive:</p> <pre class="lang-html prettyprint-override"><code>&lt;div ng-switch="dirName"&gt; &lt;div ng-switch-when="ng-user"&gt; &lt;div ng-user&gt;&lt;/div&gt; &lt;/div&gt; &lt;div ng-switch-when="..."&gt; ... &lt;/div&gt; &lt;/div&gt; </code></pre> <p>However, now it might be better to use something more descriptive than <code>ng-user</code> to <em>switch</em> over.</p> <p><strong>Sidenote:</strong> Do not use <em>ng-</em> prefix in your own directives. Angular uses that prefix so that it does not collide with other namespaces. You should use your own prefix for your directives.</p> <hr> <p><strong>Update</strong>: For the updated question as to why <code>&lt;div class="{{dirName}}"&gt;&lt;/div&gt;</code> does not work, it happens because angular <a href="http://docs.angularjs.org/api/ng.%24compile" rel="nofollow"><code>$compile</code>s the directive</a> only once. If you first <a href="http://docs.angularjs.org/api/ng.%24interpolate" rel="nofollow"><code>$interpolate</code></a> the content of the template (which will replace <code>{{dirName}}</code> with <code>ng-user</code>) and then explicitly <code>$compile</code> it before entering it in the HTML, it should work.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload