6

コンテンツをグリッドとして再配置するカスタム ディレクティブを構築しようとしています。ng-repeatディレクティブの結果をトランスクルージョンしてから、結果の要素を並べ替えたいと考えています。

問題はelement.children()、リンク関数内でメソッドを呼び出すと、ng-repeatディレクティブがまだレンダリングされておらず、コメントとして解釈されるため、空の配列があることです。

それ以外の場合、その内容が「静的」である場合、ディレクティブはうまく機能します。

HTML

<grid n='6'>
    <div ng-repeat="i in [1,2,3]"></div>
</grid>

興味深いコードのみを含む私のディレクティブ:

app.directive('grid', [function () {
    return {

        restrict: 'E',
        replace: true,
        transclude: true,
        template: "<div ng-transclude></div>",

        link: function (scope, grid, attrs) {

            // With an ngRepeat transcluded, els result in an empty array
            var els = grid.children();

            // ...
    }; 
}]);

何が欠けていますか？

4

2 に答える 2

0

並べ替えを行うには、いくつかのオプションがあります。

  1. DOM を操作します。私見、これは最も好ましくない方法であり、あまり角度がありません。
  2. ngRepeatリンク関数で使用されている配列 ([1, 2, 3]) を並べ替えます。
  3. orderByフィルターを使用( doc )

2 と 3 を示す plunk を作成しました。http://plnkr.co/edit/vrgeBoJZiG6WMu4Rk46u?p=preview

于 2013-07-27T02:58:39.383 に答える