AngularJS/同位素——在页面加载后调用.同位素（“relayat”）

我正在尝试将同位素与AngularJS结合使用（以布局一组“卡片”）。我没有直接添加到DOM中，而是使用container.同位素（'insert'，element）通过同位素添加元素

我在linking函数中完成了所有这些操作，但是当我在linking函数中将内容插入DOM时，大小设置不正确（在我的例子中，高度为0），因此元素无法正确绘制

如果我调整窗口的大小，那么元素将正确绘制。我在想，我可以使用$viewContentLoaded上的watch来调用刷新同位素布局的函数（即container.同位素（'reLayout'）），但$viewContentLoaded事件似乎从未触发。我是做错了什么，还是应该使用其他方法

编辑：我通过执行scope.$root.$on（“$viewContentLoaded”，function（）{}）获得了要运行的函数；但这并没有帮助…（似乎很早就接到了电话）

编辑2：在玩了更多的游戏之后，div被正确地添加到同位素中，但是因为它的父div的高度为0，所以子div的大小被正确地设置。如果我设置timeout（element.isotox（'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"); });

                }
            }

            );              
        }
    };
});

module.directive（'tileGrid'，function（）{
var mytemplate='{{card.Title}}'；
var original=angular.element（mytemplate）；
返回{
限制：“A”，
替换：正确，
是的，
模板：“”，
链接：函数（范围、元素、属性）
{ 
同位素（{itemSelector:'.item'，layoutMode:'fitRows'}）；
var curCards=scope.cards.map（函数（a）{returna.nextView；}）；
scope.$watch（'scope.cards'，function（）
{       
//将对diff执行此操作，但现在迭代所有元素
对于（var i=0；i我不完全确定这是否是问题所在。我遇到了一个问题，因为我在postLink中修改了DOM，所以链接变得一团糟。我最终使用setTimeout将所有DOM操作移动到延迟状态

然而…现在我回去尝试重现这个问题，我不再看到它了

Angular UI提到了这个问题，事实上，正是这一点帮助我解决了我遇到的问题：


您可以尝试在compile函数或setTimeout调用中执行所有DOM操作

如果您还没有，请阅读关于何时可以安全地进行DOM操作，何时不可以