AngularJS: Создание директивы, которая повторяет зашифрованный шаблон

Question

У меня возникла ситуация, когда я хочу создать директиву, которая принимает массив элементов и разбивает их на переменное количество столбцов, обертывая их элементами, которые создают столбцы. Потратив часы на часы, пытаясь разобраться в разных вещах, я не могу понять, как это сделать. Вот как я хочу использовать эту директиву:

<columnize columnCount="3" collection="items"> 
    <div>{{item.Name}}</div> <!-- this is the repeated part --> 
</columnize> 

директива будет получать два входа, ColumnCount и коллекции. Директива внутренне берет коллекцию и разбивает ее на вложенный массив с нужным количеством столбцов, каждый из которых содержит элементы для этого столбца. Полученный массив появится что-то вроде этого:

$scope.columns = [ 
    [{Name: "Item1"}, {Name: "Item2"}, {Name: "Item3"}], 
    [{Name: "Item4"}, {Name: "Item5"}, {Name: "Item6"}], 
    [{Name: "Item7"}, {Name: "Item8"}] 
]; 

Затем я хочу вывести чанки столбцов с помощью шаблона, похожее на это:

<div class="row-fluid"> 
    <div class="column" ng-repeat="column in columns"> 
     <span ng-repeat="item in column"> 
      <span ng-transclude></span> 
     </span> 
    </div> 
</div> 

проблема состоит в том, что я не могу получить переключение для работы с момента его повторения внутри ngRepeat. Я предполагаю, что мне нужно клонировать содержимое и вставлять их каким-то образом в этот шаблон вручную, но я не могу найти хороших примеров. Я нашел, что это какой вид выглядит как то, что я хочу сделать, только без вложенных ретрансляторов:

http://liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/

Я надеюсь, есть более простой способ сделать это, чем это. Любые идеи, как я могу это сделать?

Answer 1

http://plnkr.co/edit/j5wpTScJXoMMrIyXyASE?p=preview

Это, как я хотел бы сделать это. Имейте в виду, что вам обязательно понадобится CSS для компоновки столбцов столбцов.

app.directive('columnize', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     collection: '=', 
     columnCount: '=' 
    }, 
    transclude: true, 
    template: '<div><div class="column" ng-repeat="col in cols">' + 
     '<div ng-repeat="item in col" ng-transclude></div>' + 
     '</div></div>', 
    link: function(scope) { 
     var partition = function partition(size, items) { 
     if (items.length === 0) { return []; } 
     return ([items.slice(0, size)]).concat(partition(size, items.slice(size))); 
     }; 
     var columnize = function() { 
     if (!scope.columnCount) { return; } 
     scope.cols = partition(scope.columnCount, scope.collection); 
     }; 
     scope.$watch('columnCount', columnize); 
     scope.$watch('collection', columnize); 
    } 
    }; 
});