页面加载后AngularJS / Isotope--调用.isotope（QUOT;重新布局＆QUOT） [英] AngularJS / Isotope-- calling .isotope("reLayout") after page loads

问题描述

我试图用同位素与AngularJS（布局了一套卡）。而不是增加直接的DOM，我加用container.isotope（插入，元素），通过同位素元素。

我做这一切在链接功能，但现在看来，当我插入到的东西在链接功能的DOM，大小设置不正确（在我的情况，高度为0），所以元素穿上吨得到正确绘制。

如果我调整窗口的大小，元素然后得到正确绘制。我在想，我可以使用在$ viewContentLoaded的手表来调用刷新同位素（即container.isotope（重新布局））的布局功能，但是$ viewContentLoaded事件似乎永远不会触发。我是不是做错了什么还是有，我应该使用一些其他的方法？

编辑：我对（'$ viewContentLoaded'，函数（）{}）获得通过做范围$根用户身份运行功能$;但这并没有帮助... ...（这似乎被调用到年初）

编辑2：周围很多玩后，div的越来越正确地同位素增加，而是因为它的父div有0高度，孩子们尺寸越来越正确。如果我做的setTimeout（element.isotope（重新布局），100），它工作正常。任何方式模仿呢？

  module.directive（'tileGrid'，函数（）{
VAR MyTemplate的='＆LT; D​​IV CLASS =项{{card.class}}＆GT; {{card.Title}}＆LT; / DIV＆GT;';
VAR原= angular.element（MyTemplate的）;返回{
    限制：'A'，
    更换：真实，
    transclude：真实，
    模板：'＆LT; D​​IV ID =tileGridContainer＆GT;＆LT; / DIV＆GT;，
    链接：功能（范围，元素，ATTRS）
        {
            element.isotope（{itemSelector：'项'，layoutMode：fitRows'}）;
            VAR curCards = scope.cards.map（函数（）{返回a.nextView;}）;            范围。$腕表（'scope.cards'，函数（）
            {
//将做到这一点的差异，但现在遍历所有元素
                对于（VAR I = 0; I＆LT; scope.cards.length;我++）
                {
                    VAR卡= scope.cards [I]                    VAR childScope = $范围新的（）。
                    childScope.card =卡;
                    scope.compile（原件）（childScope，功能（clonedElement，childScope）{
                        element.isotope（插入，clonedElement）;
                    }）;
                    范围在$（'$ viewContentLoaded'，函数（）{的console.log（查看装）;}）;                }
            }            ）;
        }
    };
}）;
 

解决方案

我不能完全确定这是否是问题或没有。我碰到连接的地方得到了全乱了，因为我修改了postLink的DOM中的问题。最后我将所有的DOM操作使用的setTimeout推迟。

不过......现在，我回去，并尝试重现该问题，我不再看到它。

角UI提到的问题，它实际上是有这个来我的知识，帮助我解决我遇到的问题：

<一个href=\"https://github.com/angular-ui/angular-ui/blob/5279043da2885d7bdeb487a3569ec9dea83e6217/modules/directives/select2/select2.js#L103\"相对=nofollow>角的UI模块/指令/ SELECT2 / select.js：103在GitHub上

您可能会尝试做所有DOM操作的编译功能，或在方法setTimeout。

如果您还没有准备好，请阅读 AngularJS：指令了解当它是安全的DOM操作，而当没有。

I'm trying to use isotope with AngularJS (to layout a set of "cards"). Instead of adding to the DOM directly, I add elements via isotope using container.isotope('insert',element).

I do all this in the linking function, but it appears that when I insert stuff into the DOM in the linking function, the sizes aren't set correctly (in my case, height is 0), so the elements don't get drawn properly.

If I resize the window, the elements then get draw correctly. I was thinking that I could use a watch on $viewContentLoaded to call the function that refreshes the layout of isotope (i.e., container.isotope('reLayout')), but the $viewContentLoaded event never seems to fire. Am I doing something wrong or is there some other methodology I should be using?

EDIT: I got the function to run by doing scope.$root.$on('$viewContentLoaded',function(){}); but that did not help...(it appears to get called to early)

EDIT 2: After playing around a lot more, the div's are getting added properly with isotope, but because it's parent div has 0 height, the children sizes are getting set properly. If I do setTimeout(element.isotope('relayout'),100) it works fine. Any way to mimic this?

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"); });

                }
            }

            );              
        }
    };
});

解决方案

I'm not entirely sure if this is the issue or not. I've run into an issue where linking got all messed up because I was modifying the DOM in the postLink. I ended up moving all DOM manipulation to be deferred using setTimeout.

However... now that I go back and try to reproduce the issue, I'm no longer seeing it.

Angular UI mentions the problem, and it was actually having this come to my knowledge that helped me fix the problem I was experiencing:

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

You might try to do all DOM manipulation in the compile function, or in a setTimeout call.

If you haven't already, read AngularJS: Directives about when it is safe to do DOM manipulation, and when not.

这篇关于页面加载后AngularJS / Isotope--调用.isotope（QUOT;重新布局＆QUOT）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！