1

我正在尝试将同位素与 AngularJS 一起使用（布置一组“卡片”）。我没有直接添加到 DOM，而是使用 container.isotope('insert',element) 通过同位素添加元素。

我在链接函数中执行所有这些操作，但似乎当我在链接函数中将内容插入 DOM 时，尺寸设置不正确（在我的情况下，高度为 0），因此不会绘制元素适当地。

如果我调整窗口大小，则元素会正确绘制。我在想我可以在 $viewContentLoaded 上使用手表来调用刷新同位素布局的函数（即 container.isotope('reLayout')），但 $viewContentLoaded 事件似乎永远不会触发。我做错了什么还是应该使用其他方法？

编辑：我通过执行 scope.$root.$on('$viewContentLoaded',function(){}); 来运行函数 但这并没有帮助......（它似乎被提前打电话）

编辑 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 模块/指令/select2/select.js:103

您可能会尝试在 compile 函数或 setTimeout 调用中进行所有 DOM 操作。

如果您还没有，请阅读AngularJS：关于何时可以安全地进行 DOM 操作以及何时不安全的指令。

于 2012-11-07T19:19:39.637 回答