递归调用 AngularJS 中的指令

Question

这是我的指令：

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

这是我的模板：

<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>

基本上我有一个嵌套的 JSON 对象，它可以包含 configValue.type 或 string、int、boolean 或 object。如果类型是一个对象，我想一次又一次地迭代它，直到我遍历整个嵌套文档。

问题是我不知道如何以允许我这样做的方式使用 ngRepeat。目前我正在创建一个无限循环，因为我正在重用 configKey 和 configValue.

我该如何解决这个问题？

Answer 1

来自文档：

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.

所以基本上你需要做的是，在你的 postLink 函数中，迭代 configValue.value，如果它是对象类型，然后手动 $compile 并附加到你的模板，指令.

类似于：

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);
}

递归调用 AngularJS 中的指令

Recursively call a directive in AngularJS

angularjs

angularjs-directive