Recursively call a directive in AngularJS

Question

This is my directive:

ngjoola.directive('configItem', function() {
  return {
    restrict: 'AE',
    templateUrl: '/templates/configItem.html'
  };
});

This is my template:

<div ng-if="configValue.type == 'string'" class="form-group">
  <label for="{{configValue.key}}" class="col-sm-2 control-label">{{configValue.name}}</label>
  <div class="col-sm-4">
    <input type="text" name="{{configValue.key}}" id="{{configValue.key}}" ng-model="configValue.value" placeholder="{{configValue.key}}" class="form-control"/>
  </div>
</div>
<div ng-if="configValue.type == 'boolean'" class="form-group">
  <label for="{{configValue.key}}" class="col-sm-2 control-label">{{configValue.name}}</label>
  <div class="col-sm-4">
    <input type="checkbox" name="{{configValue.key}}" id="{{configValue.key}}" ng-model="configValue.value" placeholder="{{configValue.key}}"/>
  </div>
</div>
<div ng-if="configValue.type == 'int'" class="form-group">
  <label for="{{configValue.key}}" class="col-sm-2 control-label">{{configValue.name}}</label>
  <div class="col-sm-4">
    <input type="text" name="{{configValue.key}}" id="{{configValue.key}}" ng-model="configValue.value" placeholder="{{configValue.key}}" class="form-control"/>
  </div>
</div>
<div ng-if="configValue.type == 'object'" class="form-group subConfig"><strong>{{configValue.name}}</strong>
  <div ng-repeat="(configKey, configValue) in configValue.value">
    <config-item></config-item>
  </div>
</div>

Basically I have a nested JSON object that can either contain configValue.type of string, int, boolean or object. If the type is an object, I would like to iterate over it again and again until I've iterated throughout the whole nested document.

Problem is that I don't know how to use the ngRepeat in a way that will allow me to do so. Currently I'm creating an endless loop since I'm reusing the configKey and configValue.

How can I fix this?

Answer 1

From the docs:

Note: The compile function cannot handle directives that recursively use themselves in their own templates or compile functions. Compiling these directives results in an infinite loop and a stack overflow errors. This can be avoided by manually using $compile in the postLink function to imperatively compile a directive's template instead of relying on automatic template compilation via template or templateUrl declaration or manual compilation inside the compile function.

So basically what you need to do is, in your postLink function, iterate over configValue.value, if that is of the type object, and manually $compile and append to your template, the directive.

Something like:

angular.forEach(configValue.value, function(value, key) {
   var newScope = $scope.$new();
   newScope.configValue = value;
   var newElem = $compile('<config-item></config-item>')(newScope);
   element.append(newElem);
}