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

ディレクティブに関してはドキュメントを読みましたが、私はただ愚かであるか、明らかなことを見逃しているので、助けてください。

ウォールオブテキストの終わりと、おそらく少しの睡眠でうまくいくでしょう。いわば明日馬に飛び乗ってください。

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

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

これが基本的な答えです。要素に ng-class を使用した動作中のプランクを次に示します。

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 に答える