线程中描述的解决方案的启发，我将递归功能抽象为service。
module.factory('RecursionHelper', ['$compile', function($compile){ return { compile: function(element, link){ // Normalize the link parameter if(angular.isFunction(link)){ link = { post: link }; } // Break the recursion loop by removing the contents var contents = element.contents().remove(); var compiledContents; return { pre: (link && link.pre) ? link.pre : null, post: function(scope, element){ // Compile the contents if(!compiledContents){ compiledContents = $compile(contents); } // Re-add the compiled contents to the element compiledContents(scope, function(clone){ element.append(clone); }); // Call the post-linking function, if any if(link && link.post){ link.post.apply(null, arguments); } } }; } };}]);用法如下：
module.directive("tree", ["RecursionHelper", function(RecursionHelper) { return { restrict: "E", scope: {family: '='}, template: '<p>{{ family.name }}</p>'+ '<ul>' + '<li ng-repeat="child in family.children">' + '<tree family="child"></tree>' + '</li>' + '</ul>', compile: function(element) { // Use the compile function from the RecursionHelper, // And return the linking function(s) which it returns return RecursionHelper.compile(element); } };}]);观看此Plunker进行演示。我最喜欢此解决方案，因为：
- 您不需要特殊的指令，这会使您的html不太干净。
- 递归逻辑被抽象到RecursionHelper服务中，因此您可以保持指令整洁。
更新：从Angular 1.5.x开始，不再需要其他技巧，但仅适用于 template ，不适用于 templateUrl
