Add subordinate directives?

Question

Add subordinate directives?

So I want to be able to author an element like so:

<div my-directive></div>

And, I'd like my-directive to add subordinate directives.

<div my-directive subordinate-directive></div>

Currently, I'm adding these directives at compile time, but they don't get re-run. On children elements generated from the directive's template, I can do whatever I wish, because I'm likely adding to the child template before directives run.

Example: http://plnkr.co/edit/6y6Ebzqf1gLkTBEUcKfi?p=preview

angularjs
angularjs-directive

Answer 1

The problem is that by the time my-directive is being processed the collect directives phase has passed and modifying the element won't trigger a new compile.

You need to manually trigger the compile phase again after you added all the other directives, see plunker.

app.directive("queue", [ '$compile', function($compile) {
  var directiveDefinitionObject;
    directiveDefinitionObject = {
      scope: {},
      controller: [
        '$scope', function($scope) {
          $scope.entries = [{name: 1}, {name: 2}, {name: 3}];
        }
      ],
      template: $("#entry").html(),
      compile : function(tElement, tAttrs, transclude) {
        var compiler;

        //All children related directives go here since the template hasn't been
        //appended yet in the post link function when we re-compile
        tElement.children().attr('ng-repeat', 'entry in entries');

        compiler = {
          pre : function(scope, iElement, iAttrs, controller) {
          },
          post : function(scope, iElement, iAttrs, controller) {
            if (iElement.attr('can-do-thing-i-define') === undefined) {
              var c = tElement.clone();

              c.attr('can-do-thing-i-define', '');

              $compile(c)(scope);

              iElement.replaceWith(c);
            }
          }
        };
        return compiler;
      }
    };
    return directiveDefinitionObject;
}]);