Can I use arbitrary AngularJS directives inside other directives?

Question

I would like display a list of objects from my controller using a directive. Inside that directive I'd like to be able to use one of several possible directives, but I won't always know which one. If I set that directive name in the controller's scope, how can I use it within the template of the main directive?

Here's a plnkr with what's below.

HTML:

<div ng-app="music" ng-controller="rock">
  <h1>Favorite Bands</h1>
  <prog></prog>
</div>

JS:

angular.module('music', []);

angular.module('music').controller('rock', ['$scope', function($scope){
  $scope.directiveName = 'dinosaurs';
  $scope.bands = [
    { name:'Rush'}, { name:'King Crimson' }, { name: 'Porcupine Tree'}, { name: 'Marillion'}];
}]);

angular.module('music').directive('prog', function(){
  return {
    restrict: 'E',
    replace: true,
    template: '<ul><li ng-repeat="band in bands"><{{directiveName}}>{{band.name}}</{{directiveName}}></li></ul>'
  };
});

angular.module('music').directive('dinosaurs', function(){
  return {
    restrict: 'E',
    transclude: true,
    template: '<ng-transclude></ngtransclude> - DINOSAUR!'
  };
});

In this case, I'm setting the $scope.directiveName to dinosaurs, which is the name of the directive I want to use inside the main one, called prog.

In prog's template, I'm trying to use interpolation to insert the name of the directive into the brackets. That, however, outputs this:

• <dinosaurs>Rush
• <dinosaurs>King Crimson
• <dinosaurs>Porcupine Tree
• <dinosaurs>Marillion

I've also tried using class name on a span: , and that inserts "dinosaurs" into the span as a class but Angular doesn't then process it as a directive.

I'm not sure if I need an isolate scope here, but from what I've read I don't think that's relevant. I'm also new to transclusion, but I think that the dinosaurs directive should take the content of each list item and add " - DINOSAURS!" to the end of it.

What's the best practice way to go about passing in the name of one directive to another?

Answer 1

what I would do to avoid the messy $compiles is use ng-include as the switch, something like this:

angular.module('music').directive('prog', function(){
  return {
    restrict: 'E',
    replace: true,
    template: '<ul><li ng-repeat="band in bands"><div ng-include="directiveName + \'.html\'"></div></li></ul>'
  };
});

Answer 2

Update - You have a few options within the directive to change the template:

The easiest first idea, is template:function(el, attr) which allows you return a function enabling you to change the template based on non-interpolated attributes. so it probably doesn't meet your needs.

template:function() plunker,

The other way is to $compile the templates and replace you element in the link function.

$compile plunker

---

This wasn't about multi-template -

You can reach the controller of the parent directive in the link function and maintain scope in it. here's attempt to cut it down to the essentials:

app.directive("parentDirective", function() {
  return {
    restrict: 'EA',
    controller: function($scope) {
        this.callFunc = function(){
           ...
        }
    }
  }
});

app.directive("childDirective", function($compile, $log) {

  return {
    require: '?^parentDirective',
    scope: {
       model: '=ngModel'
    },
    link : function(scope, el, attr, ctrl) {
        ctrl.callFunc();
    }
...

and a similar plunker or plunker

Answer 3

One possible solution is to shift the responsibility of "how do I render this item" from the controller/directive into the item itself.

The simplest way of doing this would be to give the item a templateUrl property. You could then introduce a simple wrapper directive to bind the items:

myModule.directive('bandView', function() {
  return {
    scope: {band: '=bandView'}
    templateUrl: '<div ng-include="band.templateUrl"></div>'
  };
});

Then, if you have some list of bands, you can render them:

<h1>My band list</h1>
<div ng-repeat="b in bands" band-view="b"></div>

Then you would have different html templates for each type of rendering you want to do.

Here's the idea running: http://jsbin.com/EhAnIMaJ/2/edit?html,js,output