Question

我想创建像“grid”这样的指令，其功能如下：

<grid columns="1">
    <grid-item>One of unlimited number...</grid-item>
    <grid-item>Another one...</grid-item>
<grid>

Grid会为每个网格项呈现HTML - 例如，它可能会在引导行中包装n个网格项。

我看到了一种使用命名插槽转换多个内容块的方法，但是在这种情况下将会有0 ... n个子元素。

这种事情可以用Angular 1.5.9完成吗？如果是这样，我该怎么做？

Answer 1

这是我的解决方案。可能并不完美，但它确实起到了作用。

编辑：在<grid-item>元素上使用ng-repeat时出现错误。也许有更好理解的人可以解决这个问题。

angular.module('app', [])
  .directive('grid', function() {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: {
          columns: '@',
          colClass: '@'
        },
        template: '<div class="row" ng-transclude></div>',
        link: function(scope,el,attr){
          angular.forEach(el.children(), function(item) {
            angular.element(item).addClass('col-' + scope.colClass + '-' +12/scope.columns);
          });
        }
    };
  });

angular.module('app')
  .directive('gridItem', function() {
    return {
      restrict: 'EA',
      replace: true,
      transclude: true,
      template: '<div ng-transclude/>'
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="app" class="container">
  <grid columns="2" col-class="xs">
    <grid-item>1</grid-item>
    <grid-item>2</grid-item>
    <grid-item>3</grid-item>
    <grid-item>4</grid-item>
    <grid-item>5</grid-item>
    <grid-item>6</grid-item>
  </grid>
</div>

如何转换可变数量的重复元素？

1 个答案: