angularjs - AngularJS：具有动态模板和递归的指令

Question

我想渲染一组不同类型的项目（即示例＃1），对于一个对象类型，如果存在，则渲染一个子项目树。我不清楚如何结合链接和编译方法来达到我的目的。我不确定如何从链接转到编译阶段。

这是需要渲染的数据模型：

• item1.type = 'type2'
• item2.type = 'type1'
• item3.type = '树根' item3.children = []; // 表示树的对象数组
• item4.type = 'type2'
• item5.type = 'type1'

因此，有一个 type1.template、一个 type2.template、一个 tree-root.template 和一个 tree-node.template。渲染 tree-root.template 将包括使用 tree-node.template 对子节点进行 ng-repeat 递归渲染。

1. 这是一个基于数据类型的动态模板选择示例：https ://coderwall.com/p/mgtrkg - 它使用链接函数来选择正确的模板，并且没有明确包含编译函数。

     angular.module('components', []).
     directive('tumblrPost', ['$compile', '$http', '$templateCache', function($compile, $http, $templateCache) {
   
       var getTemplate = function(contentType) {
         var templateLoader,
         baseUrl = '/templates/components/tumblr/',
         templateMap = {
           text: 'text.html',
           photo: 'photo.html',
           video: 'video.html',
           quote: 'quote.html',
           link: 'link.html',
           chat: 'chat.html',
           audio: 'audio.html',
           answer: 'answer.html'
         };
   
         var templateUrl = baseUrl + templateMap[contentType];
         templateLoader = $http.get(templateUrl, {cache: $templateCache});
   
         return templateLoader;
   
      }
   
     var linker = function(scope, element, attrs) {
   
       var loader = getTemplate(scope.post.type);
   
       var promise = loader.success(function(html) {
           element.html(html);
       }).then(function (response) {
           element.replaceWith($compile(element.html())(scope));
       });
     }
   
     return {
       restrict: 'E',
       scope: {
           post:'='
       },
       link: linker
     };
   }]);
   

2. 这是来自这个小提琴的指令中的递归示例：http: //jsfiddle.net/n8dPm/ - 它递归地调用 compile 直到它呈现整个树，并省略一个链接函数。

           module.directive("tree", function($compile) {
               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(tElement, tAttr) {
                       var contents = tElement.contents().remove();
                       var compiledContents;
                       return function(scope, iElement, iAttr) {
                           if(!compiledContents) {
                               compiledContents = $compile(contents);
                           }
                           compiledContents(scope, function(clone, scope) {
                                    iElement.append(clone); 
                           });
                       };
                   }
               };
           });