![创建一个重复嵌入模板的指令]( "创建一个重复嵌入模板的指令")
本文介绍了AngularJS:创建一个重复嵌入模板的指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一种情况，我想创建一个指令，该指令接受一组项目并将它们拆分为可变数量的列，并用构成列的元素将它们包装起来.在花费数小时的时间尝试各种事情之后，我对如何构建它感到困惑.这是我想如何使用这个指令:
<div>{{item.Name}}</div><!-- 这是重复的部分--></columnize>
该指令将接收两个输入，columnCount 和 collection.该指令在内部获取集合并将其拆分为具有所需列数的嵌套数组，每个数组包含该列的项目.结果数组将如下所示:
$scope.columns = [[{名称:项目1"}，{名称:项目2"}，{名称:项目3"}]，[{名称:Item4"}，{名称:Item5"}，{名称:Item6"}]，[{名称:Item7"}，{名称:Item8"}]];
然后我想使用与此类似的模板输出列块:
<div class="column" ng-repeat="列中的列"><span ng-repeat="列中的项目"><span ng-transclude></span></span>
这个问题是我似乎无法让嵌入工作，因为它在 ngRepeat 中重复.我猜我需要克隆内容并以某种方式手动将它们插入到这个模板中，但我似乎找不到任何好的例子.我发现这看起来像我想要做的，只是没有嵌套的中继器:
http:///liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/
我希望有比这更简单的方法.我有什么想法可以做到这一点吗?
解决方案
http://plnkr.co/edit/j5wpTScJXoMMrIyXyASE?p=preview
这就是我要做的.请记住，您肯定需要 CSS 来设置列布局的样式.
app.directive('columnize', function() {返回 {限制:'E'，范围: {集合:'='，列数:'='},转置:真实，模板:'<div><div class="column" ng-repeat="col in cols">'+'<div ng-repeat="列中的项目" ng-transclude></div>'+'</div></div>',链接:函数(作用域){var partition = function partition(大小，项目){if ( items.length === 0 ) { return [];}return ([items.slice( 0, size )]).concat( partition( size, items.slice( size )));};var columnize = function() {如果(！scope.columnCount){返回；}scope.cols = partition( scope.columnCount, scope.collection );};scope.$watch('columnCount', columnize);scope.$watch('collection', columnize );}};});
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>
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:
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=preview
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:创建一个重复嵌入模板的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！