AngularGrid doesn't load when refresh page

Question

I'm using this AngularGrid system and everything is working so far, except when i refresh the page.

In the doc there is an orientation on how to solve this:

To get the reference of instance you need to define angular-grid-id on the element which you can get back by injecting angularGridInstance to any controller or directive. Using your id you can refresh your layout ex : angularGridInstance.gallery.refresh();

And this is what I did:

html

<ul class="dynamic-grid" angular-grid="pics" angular-grid-id="mypics" grid-width="300" gutter-size="10" refresh-on-img-load="false" >
    <li data-ng-repeat="port in Portfolio" class="grid" data-ng-clock>
        <img src="{{port.img[0]}}" class="grid-img" />
    </li>
</ul>

app.js

.directive('myPortfolio', ['mainFactory','angularGridInstance', function (mainFactory,angularGridInstance) {
    return {
        restrict: "A",
        link: function($scope) {
            mainFactory.getPortfolio().then(function(data) {
                $scope.refresh = function(){
                    angularGridInstance.mypics.refresh();
                }
                $scope.pagedPortfolio = data.data;
            })
        }
    }
}])

But if I refresh the page, it still doesn't work. There is some boxes but without image loaded and it's not inside the grid system. Also, I have no errors in my console. When this happens, I can only see the images again if I change to another page and then go back to my portfolio page.

Any ideas on how to solve this?

Answer 1

I think you don't need angularGridInstance and refresh function here. Just change

refresh-on-img-load="false"

to

refresh-on-img-load="true"

in your view.