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

来自文档：

注意：compile函数无法递归处理指令在自己的模板或编译函数中使用自己。编译这些指令导致无限循环和堆栈溢出错误。这可以通过在postLink中手动使用$ compile来避免函数来命令性地编译指令的模板而不是依靠通过模板或templateUrl的自动模板编译编译函数内的声明或手动编译。

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

类似的东西：

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中递归调用指令

1 个答案: