airfranceklm / ng-lazy-image

Angular directive for loading responsive image when container (which is preventing reflow) is in viewport.
http://afklm.github.io/ng-lazy-image/
MIT License
350 stars 64 forks source link

Storing data on factory on route change back image does not load until mouse scroll. #50

Closed ZhangMYihua closed 8 years ago

ZhangMYihua commented 8 years ago

I have an app where I have built a service that stores data on the factory itself. I've injected my factory into my controller and I reveal the data from the factory to my controllers scope. When I navigate away and then back to my view, the images are not loading until I move my mouse scroll. My factory is something like this...

Pseudo Factory code

angular.module('app').factory('myFactory', ['$http', function($http){
  var data = {
    storedData : []
  };

  return {
    data : data,

    fetchData : function(){
      *pseudo code here
      $http.get(....)
      .then(function successcallback(response){
        data.storedData = response.data
      });
    }
  };
}]);

controller code

angular.module('app').controller('appCtrl', ['myFactory', function(myFactory){

  $scope.data = myFactory.data

}]);

view code

<div ng-repeat=" item in data.storedData">
     <img afkl-lazy-image="item.[imagesrc]" >
</div>

Can you help me with whats going on? When I load it initially it works, but when I come back to the view, the objects are loaded but the images dont appear until I move the scroller.

Thank you!

SquadraCorse commented 8 years ago

Then you don't clear scope "but when I come back to the view" i can't read your code but then you have to tell the images something changed by using event on rootScope $rootScope.$broadcast('afkl.lazyImage.destroyed'); normally if you use ui-router or so this destroy will allways happen on view change but i guess you tricked some stuff yourself...

ZhangMYihua commented 8 years ago

Can you elaborate? I've cleaned up the code a little for you to see.

SquadraCorse commented 8 years ago

yes but this code it now giving me tips can you set breakpoint with unminified module and then set it with inview calculation and see where it thinks the images on start are?

ZhangMYihua commented 8 years ago

So are you saying I should rebind the image elements to the scope when I navigate back to the page? From what I see, the attribute afkl-Lazy-Image-Loaded on the element is set to true the moment that I scroll a little bit. Before that when I navigate to the page, the element doesn't even have that attribute afkl-Lazy-Image-Loaded. Is there more I can clarify?

SquadraCorse commented 8 years ago

i cant help without seeing it completely "When I navigate away and then back to my view" this can be interpreted multiple ways. If you use ui-router every view has it's own scope and will be destroyed, if you mean navigate back with backbutton then the route will change the images will be destroyed and new view will be placed. If you dont destroy scope as it should then you should make the elements aware you switched something by the broadcast mentioned.