1

==================

首先，我只想说我是这个 AngularJs 业务的新手（今天早些时候开始），我可能把事情复杂化了。

话虽如此，让我们开始谈正事，好吗？

我有以下jsFiddle，html 输出如下。

<div ng-app="test" ng-controller="About" class="hex-grid clearfix ng-scope">
    <div class="hex odd" ng-repeat="person in ledning">
        <a href="">
           <div class="inner">
               <h3 class="ng-binding">Just a name</h3>
               <hr class="grid-1 center">
               <p class="ng-binding">a title</p>
           </div>
           <div class="hex-1">
               <span class="after"></span>
           </div>
           <div class="hex-2">
               <span class="after"></span>
           </div>
           <span class="after"></span>
        </a>
    </div>
   <!-- and 5 times more -->
</div>

现在，我想要实现的是 --> http://jsfiddle.net/engstrumpan/yCv79/4/embedded/result/。

这只是简单的 html（没有 AngularJs），只是为了演示我想要实现的目标。这种特殊的布局是通过<br />在六边形3和5之后插入来实现的

现在想象一下，如果我想要这样的布局

 1 1 1                1
1 1 1 1   or even    1 1
 1 1 1              1 1 1
                   1 1 1 1
                    1 1 1
                     1 1
                      1

一个人将如何实现这一点？该指令被多次使用，所以我希望它尽可能通用。

到目前为止我尝试过的是以下内容

var app = angular.module('test', []);
app.controller('About', function ($scope) {
    $scope.ledning = [
      {
        ...
        shouldBreak: true
      }
});
app.directive('hexagon', function () {
    var tmpl = '<div>
                   <!-- directive template snippet -->
                </div>
                <br ng-show="{{data.shouldBreak}}" />';

  // rest  of code
});

这<br ng-show="{{data.shouldBreak}}" />不起作用，因为 AngularJs 抛出异常并显示以下消息Template must have exactly one root element.

也像这样弄乱compile指令，但这只会导致在<br />最后一次迭代之后插入（在中继器完成工作之后）

var app = angular.module('test', []);
app.directive('hexagon', function () {
   return { 
     ...
     compile: function($scope, el, attrs){
        return function ($scope, el, attrs){
            if($scope.data.shouldBreak !== undefined){
                el.after('<br />');
            }
        };
     }
    }
});

我已经阅读了有关指令的文档，要么我很愚蠢，要么我错过了明显的东西，所以请帮助我。

walloftext 结束，也许睡一会儿就可以了。可以这么说，明天再骑马。

4

2 回答 2

2

所以我在离开几天后设法找到了一个解决方案，然后当我回到城里时，我再次解决了我的问题。

解决方案

风景

<hexagon ng-repeat="person in ledning" data="person" layout="layout"></hexagon>

控制器：

var app = angular.module('test', []);
app.controller('About', function ($scope) {
    ...
    $scope.layout = [2,4]; // what index (inside ngRepeat) should we break on

}

});

和指令

app.directive('hexagon', function ($timeout) {
...
return {
    ...
    scope: {
        data: '=',
        layout: '=' // grab the data bound to 'layout'
    },
    link: function ($scope, el, attrs) {
        $timeout(function(){
            for (var i = 0; i < $scope.layout.length; i++) {

                        if ($scope.layout[i] == $scope.$parent.$index)
                            el.after('<br />');
                    }
        }, 0);
    }
};

});

可以在这里看到一个工作示例http://jsfiddle.net/engstrumpan/yCv79/5/。

因此，例如，如果我要处理 10 个项目，我可以设置$scope.layout = [2,6]在这个jsFiddle中获得以下输出

那么我是如何得到这个解决方案的呢？好吧，我必须感谢这个人（Lorenz Merdian）和他的博客。至少当它归结$timeout为给浏览器足够的时间来渲染元素的 DOM 时，我可以插入我的<br />

它可能不是最优雅的解决方案，但在这种特殊情况下它对我有用

于 2013-07-24T21:25:23.347 回答
1

"\a"您可以使用伪类在相关元素之前:before或之后插入回车:after（尽管如果您支持旧版浏览器，这不适合您）。

CSS：

.last:before {
    content: "\A";
    white-space:pre;
}

以及ng-class设置换行类的条件，其中item.lineBreak包含true或false取决于其在组中的顺序：

ng-class="{last:item.lineBreak}"

这是基本答案，这里是元素上带有 ng-class的工作 plunk 。

ng-class模板中根元素上的 plunk的分叉。结果相同。

..

..

棘手/有趣的部分是能够将该类/伪类动态插入到正确的元素中，而无需对其进行硬编码。看起来你想要一个金字塔（斐波那契崇拜者）设计（这就是这个问题看起来很有趣的地方）。

我所做的是使用一个非常基本的循环过程将true属性 - （来自上面的示例item.lineBreak） - 插入到ng-repeat. 我把它放在$watch一个选择框模型中，这样你就可以选择组中的项目数。

这是 $watch 和

var findFib = function(index){

if(index==increment){
  rowLength += 1;
  increment = rowLength + increment;
  return true;
}   

return false;
}

$scope.$watch('collectionAmount.value', function(val){
    $scope.collection = [];
    rowLength = 1;
    increment = 1;
    var i = 1;

    //loop through the items, using the Fibonacci-like
    //method to determine which items will recieve the 
    //lineBreak property of true;
    while(i<=val){
      var f = findFib(i);
      $scope.collection.push({number: i, lineBreak: f});
      console.log($scope.collection[i-1]);
      i++;      
    }
    //reverse the array if using :before pseudoclass to get upside-down pyramid:
    $scope.collection.reverse();
  })

从那里，ng-class有条件地应用.last包含:before插入返回的伪类的类。这可以很容易地缩放以适应您更复杂的标记。

于 2013-07-09T03:41:31.597 回答