11

Angular JS ディレクティブを使用して、div のコンテンツを中央に配置しようとしています。

これは、テンプレートの簡略化されたバージョンです。

<div id="mosaic" class="span12 clearfix" s-center-content>
    <div ng-repeat="item in hits" id="{{item._id}}" >
    </div>
</div>

これはディレクティブです: 

 module.directive('sCenterContent', function() {
    var refresh = function(element){
        var aWidth= element.innerWidth();
        var cWidth= element.children()[0].offsetWidth;
        var cHeight= element.children()[0].offsetHeight;
        var perRow= Math.floor(aWidth/cWidth);
        var margin=(aWidth-perRow*cWidth)/2;
        if(perRow==0){
            perRow=1;
        }
        var top=0;
        element.children().each(function(index, child){
            $(child).css('margin-left','0px');
            if((index % perRow)==0){
                $(child).css('margin-left',margin+'px');
            }
        });
    };
    return {
        link : function(scope, element, attrs) {
            $(window).resize(function(event){
                refresh(element);
            });
        }
    };
});

基本的に、いくつかの内側の div をフロートし、各行の最初の div にマージンを追加するため、コンテンツが中央に配置されます。

これは、ブラウザのサイズが変更されたときに正常に機能します。初期化直後にリフレッシュしようとすると問題が発生します。

この質問に見られるように、投稿リンク機能を試しました。リンク前およびリンク後の関数は、期待される順序で呼び出されますが、s-center-content ディレクティブを持つ要素の子がレンダリングされた後ではありません。子が見つからないため、refresh の呼び出しは失敗します。

子が処理されたことを確認するにはどうすれば更新を呼び出すことができますか?

4

4 に答える 4

1

やっとできた！

livequery プラグインを使用し、link メソッドの最後に次の行を追加しました。

$('*[s-center-content] > *').livequery( function(event){
    refresh(element);
});

要素の第 1 レベルの子 (現在および将来) をs-center-contentディレクティブで選択し、要素が DOM に追加されたときに呼び出されるハンドラーをアタッチします。

編集

最後のメモ。src私のコンテンツのレイアウトは、動的に評価される属性を持つ内側の画像に主に依存しています。したがって、それを機能させるには、コードを次のように変更する必要がありました。

$('*[s-center-content] img').livequery( function(event){
    $(this).load(function(){
       refresh(element);                    
    });
});

左フローティング div を中央に配置するディレクティブの完全なコードは次のとおりです。行の最初の div に計算されたマージンを追加することに依存していることに注意してください。

module.directive('sCenterContent', function() {
    var refresh = function(element){
        var aWidth= element.innerWidth();
        var cWidth= element.children()[0].offsetWidth;
        var cHeight= element.children()[0].offsetHeight;
        var perRow= Math.floor(aWidth/cWidth);
        var margin=(aWidth-perRow*cWidth)/2;
        if(perRow==0){
            perRow=1;
        }
        var top=0;
        element.children().each(function(index, child){
            $(child).css('margin-left','0px');
            if((index % perRow)==0){
                $(child).css('margin-left',margin+'px');
            }
        });
    };
    return {
        link : function(scope, element, attrs) {
            $(window).resize(function(event){
                refresh(element);
            });
            $('*[s-center-content] img').livequery( function(event){
                $(this).load(function(){
                    refresh(element);                   
                });
            });
        }
    };
});
于 2013-04-11T10:54:20.113 に答える
0

これはcssで実現できると思います。このように数に関係なくゴール中心の要素でしょうか。

[]  []  []  []  []

    []  []  []

もしそうなら、これは css で確実に可能であり、はるかに簡単に実現できます。次に例を示します。

http://codepen.io/thetallweeks/pen/kvAJb

于 2014-01-29T18:09:29.817 に答える