火jQuery指令在角度后查看完全准备好

我正在使用自定义砌体类型布局jQuery插件，它的作品令人惊叹，我试图让它在Angular中工作，这里是迄今为止的代码：火jQuery指令在角度后查看完全准备好

app.directive('coursegridjs', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      initCourseGrid(); 
      $(window).on('resize', function(){ 
       initCourseGrid(); 
      }); 
     } // end jQuery 
    }; 
});

这里是initCourseGrid()

function initCourseGrid() { 
    // Initialize Responsive Grid 
    var conWidth = $('.courseGrid').width();  
    var col = 4; 
     col = Math.floor(conWidth/540); 
     if(col==0) {col=1;} 
    $('.courseGrid').BlocksIt({ 
     numOfCol: Math.floor(col), 
     offsetX: 3, 
     offsetY: 5, 
     blockElement: '.courseGridItem' 
     }); 
}

当页面最初加载它看起来乱七八糟，我猜，因为它没有足够的时间来正确地计算每个元素的高度。

当我调整浏览器窗口的大小时，所有内容都按原样渲染，但在初始页面加载时不显示。我需要一种方法来检测所有的指令已加载在页面上之前我打电话initCourseGrid()

我试过$超时（），但没有做任何事情。

而且，这里是怎样的coursegridjs内容被激活的状态：

<div class="courseGrid" coursegridjs> 
      <div class="courseGridItem"><coursegriditem title="Course Title" studentcount="342" author="Course Author" imageurl="images/courseBanner.jpg"></coursegriditem></div> 
      <div class="courseGridItem"><coursegriditem title="Course Title 2" studentcount="432" author="GTD" imageurl="images/courseBanner2.jpg"></coursegriditem></div> 
</div>

正如你可以看到正在被另一个叫指令所产生的网格元素coursegriditem

来源

2015-11-10 Jordash

您是否尝试过在下面的函数进行包装，？

angular.element(document).ready(function() { 
    initCourseGrid(); 
});

来源退房：How to run function in angular controller on document ready?

来源

2015-11-10 18:08:42 developthewebz

呀，没有运气它触发的功能加载的指令之前。 – Jordash

@Jordash一种哈克，但你说调整大小调用功能正确，正确？你有没有尝试模拟一个页面调整大小与JavaScript超时？我不确定这个问题有多紧急，但至少这会给你一些可用性，直到有人提出更好的解决方案。 – developthewebz

这并不紧急，我正在寻找最好的方式来做到这一点，我想我需要知道整个页面何时呈现，包括指令。 – Jordash

火jQuery指令在角度后查看完全准备好

回答

相关问题