Fire jQuery Directive in Angular after view is fully ready

Question

I'm using a custom masonry type layout jQuery plugin and it works amazing, i'm trying to get it to work in Angular, here is the code so far:

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

Here is the 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'
      });
}

When the page initially loads it looks all messed up, i'm guessing because it doesn't have time to correctly calculate the height of each element.

When I resize the browser window, everything renders as it should, but on initial page load it doesn't. I need a way to detect that all the directives have loaded on the page before I call the initCourseGrid()

I tried $timeout() but that didn't do anything.

Also here is how the coursegridjs content is being activated:

<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>

As you can see the grid elements are being generated by another directive called coursegriditem

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Have you tried wrapping it in the following function?

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

Source to check out: How to run function in angular controller on document ready?

edited May 23 '17 at 11:52

Community

1
1

answered Nov 10 '15 at 18:08

developthewebz

1,827
3
17
43

Yeah, no luck it fires the function before the directives are loaded. – Jordash Nov 10 '15 at 18:23
@Jordash Kind of hacky, but you said the resize calls the function properly, correct? Have you tried simulating a page resize with Javascript with a timeout? I'm not sure how urgent this issue is, but at least this will give you some kind of usability until someone comes up with a better solution. – developthewebz Nov 10 '15 at 18:41
It's not urgent, i'm looking for the best possible way to do it, I guess I need to know when the entire page is rendered, including directives. – Jordash Nov 10 '15 at 20:31
Did solved the problem? I have the same issue but with google map instead of masonry – Yichz Jan 14 '16 at 16:36

Fire jQuery Directive in Angular after view is fully ready

1 Answers1