Question

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

我在链接函数中做了所有这些，但是当我在链接函数中将东西插入DOM时，大小设置不正确（在我的情况下，高度为0），所以元素不要得到正确的。

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

编辑：我通过执行范围来运行函数。$ 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"); });

                }
            }

            );              
        }
    };
});

Answer 1

我不完全确定这是否是问题。我遇到了一个问题，因为我正在修改postLink中的DOM，所以链接全部搞砸了。我最终使用setTimeout将所有DOM操作移动到延迟。

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

Angular UI提到了这个问题，实际上我知道了这一点帮助我解决了我遇到的问题：

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

您可能尝试在编译函数或setTimeout调用中执行所有DOM操作。

如果您还没有，请阅读AngularJS: Directives，了解何时可以安全地进行DOM操作，何时没有。

AngularJS / Isotope--在页面加载后调用.isotope（“reLayout”）

1 个答案: