我尝试使用AngularJS创建自己的递归指令，该指令会调用自身以便将对象转换为具有漂亮JSON格式的视图。首先，我使用ng-include调用带有模板的脚本，并在其中使用ng-if来验证当前值是否为对象，如果是，则模板会调用自身。
我一直认为这是一种丑陋的方法，所以我将其转换为了指令，更加简单。
更多或更少...因为我发现了递归指令的世界，并找到了许多有趣的东西。我甚至阅读了Angular在github中的源代码（我建议您阅读：https://github.com/angular/angular.js），这是一件好事。
我搜索了很久，我认为我快要找到能够满足我的答案了！因为我学到了很多新东西，而你们也会帮助我。
请查看下面链接中的代码：https://github.com/Daymannovaes/htmljs/blob/master/js/directives/recursiveDataTemplateDirective.js 我的指令是：recursive-data-template="data"，其中数据是一个对象。此指令将循环遍历此对象的键和值，并且如果该值是对象，则会再次执行此操作。条件是使用ng-if="isObject(value)"创建的。
好的，我的第一个问题是无限循环。我需要在编译阶段删除内容，然后在postLink阶段以命令方式编译内容。我的问题是： **为什么手动编译不会遇到无限循环的相同问题？**
我正在编译相同的内容，没有进行任何条件（如果删除if（！compiledContent），则仍不会发生无限循环），区别（我认为）仅在于它们是在不同的位置制作的，但我无法在互联网上找到回答我的问题的人！
所以，谢谢！ （如果链接不起作用，这里是重要代码）：
我一直认为这是一种丑陋的方法，所以我将其转换为了指令，更加简单。
更多或更少...因为我发现了递归指令的世界，并找到了许多有趣的东西。我甚至阅读了Angular在github中的源代码（我建议您阅读：https://github.com/angular/angular.js），这是一件好事。
我搜索了很久，我认为我快要找到能够满足我的答案了！因为我学到了很多新东西，而你们也会帮助我。
请查看下面链接中的代码：https://github.com/Daymannovaes/htmljs/blob/master/js/directives/recursiveDataTemplateDirective.js 我的指令是：recursive-data-template="data"，其中数据是一个对象。此指令将循环遍历此对象的键和值，并且如果该值是对象，则会再次执行此操作。条件是使用ng-if="isObject(value)"创建的。
好的，我的第一个问题是无限循环。我需要在编译阶段删除内容，然后在postLink阶段以命令方式编译内容。我的问题是： **为什么手动编译不会遇到无限循环的相同问题？**
我正在编译相同的内容，没有进行任何条件（如果删除if（！compiledContent），则仍不会发生无限循环），区别（我认为）仅在于它们是在不同的位置制作的，但我无法在互联网上找到回答我的问题的人！
所以，谢谢！ （如果链接不起作用，这里是重要代码）：
compile: function(templateElement, templateAttributes) {
/*
in compile time, we need to remove the innerHTML of template(url) because of its recursive.
Because of its recusiveness, when the $compile start to read the DOM tree and find a
recursiveDataTemplate directive (even its not will be evaluated all time by link function
because the ng-if, whatever) its start the do all the process again. So, we need the .remove()
*/
var templateDirectiveContent = templateElement.contents().remove();
var compiledContent;
return function($scope, linkElement, linkAttributes) {
/*
This verification avoid to compile the content to all siblings, because
when you compile the siblings, don't work (I don't know why, yet).
So, doing this we get only the top level link function (from each iteration)
*/
if(!compiledContent) {
compiledContent = $compile(templateDirectiveContent);
}
/*
Calling the link function passing the actual scope we get a clone object
wich contains the finish viewed object, the view itself, the DOM!!
Then, we attach the new dom in the element wich contains the directive
*/
compiledContent($scope, function(clone) {
linkElement.append(clone);
});
};
},
}
<ul>
<li data-ng-repeat="(key, value) in fields">
<span data-ng-if="!isNumber(key)">
{{key}}:
</span>
<span data-ng-if="isObject(value)" recursive-data-template="value"></span>
<span data-ng-if="!isObject(value)">
{{value}}
</span>
</li>
</ul>