AngularJS：包含指令模板

您还需要在模板中输出族的名称：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>'