Variable value as directive/controller name inside template (with $compile/$interpolate)?

Question

I am creating a directive in which template I need to use the a scope's variable value as the name of the directive (or alternatively controller) to load.

Say I have a directive widget that has a template called widget.html which looks like:

<div class="widget widget.type" {{widget.type}} ng-controller="widget.type">
    <div class="navBar">
        <div ng-include="widget.type + '-t.html'"></div>
    <i class="fa fa-close"></i>
    <hr>
    </div>
    <div ng-include="widget.type + '-f.html'"></div>
</div>

Now widget.type is not getting evaluated in the first line. It works fine for ng-include. Say widget.type's value is weather. The first line should then be interpolated first to look like (doesn't matter if class attribute, widget.type-attr or ng-controller is interpolated)

<div class="widget" weather>

and then compiled to include the weather directive.

How can I get widget.type interpolated in the template?

Not an option is to use ng-include to load the directive. I need to use one common template for the widget and want to add/override/extend the base directive with additonal functionality/Variables.

If this is not the way to achieve that, is there a way to extend a directive the OOP-way?

See the plunkr

Answer 1

You can only place interpolation expressions in text nodes and attribute values. AngularJS evaluates your template by first turning it into DOM and then invoking directive compilation, etc. If you try to place {{...}} instead of attribute name, you'll just end up with messed-up DOM.

If you really need to replace a whole directive based on $scope variable value, you'll need to create a directive for application of other directives and do some heavy lifting with $compile (you'll have to completely re-compile the template each time the value changes). I'd recommend trying to find other designs solving your situation before attempting this.

For adjusting your template based on element attributes, see this answer.