AngularJS：创建一个重复模板transcluded指令 [英] AngularJS : Creating a directive that repeats a transcluded template

问题描述

我有，我想创建一个指令，采取项目的数组并把它们分成列的数目可变的，与让列中的元素包装他们的情况。在尝试各种事物小时花费数小时后，我难倒如何建筑师这个。这里是我想利用这个指令：

I have a situation where I want to create a directive that takes an array of items and splits them into a variable number of columns, wrapping them with elements that make the columns. After spending hours upon hours of trying various things I am stumped as how to architect this. Here is how I want to use this directive:

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

该指令将接收两路输入，列数和收藏。该指令在内部发生的收集和分割它分成与所需数量的列，每对中的项目为该列嵌套阵列。结果数组似乎是这样的：

The directive will receive two inputs, columnCount and collection. The directive internally takes the collection and splits it up into a nested array with the desired number of columns, each with the the items for that column. The resulting array would appear something like this:

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

然后我想输出使用类似这样的模板列块：

I then want to output the column chunks using a template similar to this:

<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>

这样做的问题是，我似乎无法得到transclusion自其被重复ngRepeat内工作。我猜我需要克隆的内容并以某种方式手动将它们插入到这个模板，但我似乎无法找到任何很好的例子。我发现这是哪一种看起来像什么，我想做的事情，只是没有嵌套的中继器：

The problem with this is that I can't seem to get the transclusion to work since its being repeated inside a ngRepeat. I am guessing I need to clone the content and insert them somehow into this template manually, but I cant seem to find any good examples. I found this which kind of looks like what I want to do, just without the nested repeaters:

<一个href=\"http://liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/\" rel=\"nofollow\">http://liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/

我希望有做这比一个更简单的方法。任何想法我怎么能做到这一点？

I am hoping there is an easier way to do this than that. Any ideas how I can accomplish this?

推荐答案

的http：/ /plnkr.co/edit/j5wpTScJXoMMrIyXyASE?p=$p$pview

这是我会怎么做。
请记住，你一定会需要CSS样式列布局。

This is how I would do it. Keep in mind that you'll definitely need CSS to style column layout.

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 );
    }
  };
});

这篇关于AngularJS：创建一个重复模板transcluded指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！