Question

我想呈现不同类型的项目数组（例如＃1），对于一种对象类型，呈现子项目树（如果存在）。我不清楚如何结合链接和编译方法来实现我的目的。我不确定如何从链接转移到编译阶段。

这是需要呈现的数据模型：

item1.type =＆＃39; type2＆＃39;
item2.type =＆＃39; type1＆＃39;
item3.type =＆＃39; tree-root＆＃39; item3.children = []; //表示树的对象数组
item4.type =＆＃39; type2＆＃39;
item5.type =＆＃39; type1＆＃39;

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

以下是基于数据类型的动态模板选择示例：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
  };
}]);

这是一个来自这个小提琴的指令递归的例子：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); 
                        });
                    };
                }
            };
        });

AngularJS：带有动态模板和递归的指令

0 个答案: