1

AngularJS でアイソトープを使用しようとしています (一連の「カード」をレイアウトするため)。DOM に直接追加する代わりに、container.isotope('insert',element) を使用してアイソトープ経由で要素を追加します。

これはすべてリンク関数で行いますが、リンク関数で DOM に何かを挿入すると、サイズが正しく設定されていないように見えます (私の場合、高さは 0)。そのため、要素が描画されません。ちゃんと。

ウィンドウのサイズを変更すると、要素が正しく描画されます。$viewContentLoaded の監視を使用してアイソトープのレイアウトを更新する関数 (つまり、container.isotope('reLayout')) を呼び出すことができると考えていましたが、$viewContentLoaded イベントが発生しないようです。私は何か間違ったことをしていますか、それとも使用すべき他の方法論がありますか?

編集: scope.$root.$on('$viewContentLoaded',function(){}); を実行して関数を実行しました。しかし、それは役に立ちませんでした...（早期に呼び出されたようです）

EDIT 2：さらに遊んだ後、divはアイソトープで適切に追加されていますが、親divの高さが0であるため、子のサイズが適切に設定されています。setTimeout(element.isotope('relayout'),100) を実行すると、正常に動作します。これを模倣する方法はありますか？

module.directive('tileGrid',function(){
var mytemplate = '<div class="item {{card.class}}">{{card.Title}}</div>';
var original = angular.element(mytemplate);

return {
    restrict: 'A',
    replace: true,
    transclude: true,
    template: '<div id="tileGridContainer"></div>',     
    link: function(scope,element,attrs)
        { 
            element.isotope({itemSelector:'.item',layoutMode:'fitRows'});                               
            var curCards = scope.cards.map(function(a){ return a.nextView;});                                               

            scope.$watch('scope.cards',function()
            {       
//will do this for diff, but for now iterate over all elements
                for(var i=0;i<scope.cards.length;i++)
                {                           
                    var card = scope.cards[i];

                    var childScope = scope.$new();
                    childScope.card = card;


                    scope.compile(original)(childScope,function(clonedElement,childScope){                          
                        element.isotope('insert',clonedElement);                            
                    });


                    scope.$on('$viewContentLoaded', function(){ console.log("view loaded"); });

                }
            }

            );              
        }
    };
});
4

1 に答える 1

0

これが問題なのかどうかは完全にはわかりません。postLink で DOM を変更していたため、リンクがめちゃくちゃになるという問題に遭遇しました。setTimeout を使用して、すべての DOM 操作を延期するように移動しました。

しかし...戻って問題を再現しようとすると、もう表示されません。

Angular UI は問題について言及しており、実際にこれを知ることで、私が経験していた問題を解決することができました。

GitHub の Angular-UI modules/directives/select2/select.js:103

コンパイル関数または setTimeout 呼び出しですべての DOM 操作を実行しようとする場合があります。

まだ読んでいない場合は、AngularJS: Directivesを読んで、DOM 操作を安全に実行できる場合とそうでない場合を確認してください。

于 2012-11-07T19:19:39.637 に答える