您还需要在模板中输出族的名称：http :
//jsfiddle.net/roadprophet/DsvX6/
module.directive("tree", function($compile) { return { restrict: "E", transclude: true, scope: {family: '='}, template: '<ul>' + '<li ng-transclude></li>' + '<li ng-repeat="child in family.children">' + '<tree family="child">{{family.name}}</tree>' + '</li>' + '</ul>', compile: function(tElement, tAttr, transclude) { var contents = tElement.contents().remove(); var compiledContents; return function(scope, iElement, iAttr) { if(!compiledContents) { compiledContents = $compile(contents, transclude); } compiledContents(scope, function(clone, scope) { iElement.append(clone); }); }; } };});编辑
您也可以通过执行以下操作来简化操作：http :
//jsfiddle.net/roadprophet/DsvX6/2/
<div ng-app="myapp"> <div ng-controller="TreeCtrl"> <tree family="treeFamily"> </tree> </div></div>module.directive("tree", function($compile) { return { restrict: "E", transclude: true, scope: {family: '='}, template: '<ul>' + '<li ng-transclude></li>' + '<p>{{ family.name }}</p>' + '<li ng-repeat="child in family.children">' + '<tree family="child"></tree>' + '</li>' + '</ul>', compile: function(tElement, tAttr, transclude) { var contents = tElement.contents().remove(); var compiledContents; return function(scope, iElement, iAttr) { if(!compiledContents) { compiledContents = $compile(contents, transclude); } compiledContents(scope, function(clone, scope) { iElement.append(clone); }); }; } };});编辑 虽然问题的根源相同。没有模板传递给内部树指令。
http://jsfiddle.net/roadprophet/DsvX6/3/
<div ng-app="myapp"> <div ng-controller="TreeCtrl"> <tree family="treeFamily"> <p>{{ family.name }}</p> </tree> </div></div> template: '<ul>' + '<li ng-transclude></li>' + '<li ng-repeat="child in family.children">' + '<tree family="child"><div ng-transclude></div></tree>' + '</li>' + '</ul>'
