Geek Answers Handbook

The directive does not work when selecting a tab / scrolling page in AngularJS

What I want to do is display the placeholder image before the real image is fully loaded. And I found the answer here . I use exactly the same code as the accepted answer. This answer is good for a normal situation.

However, my case is a little different. On my page I have two tabs. I use ion-slide-box to select a tab. And I load other content when the user switches tabs. Below each tab is a long list of items. Each element has an image on which I implement this method of displaying the placeholder image. User can scroll down to see more items. Therefore, when the user scrolls down, I will load more elements.

Here's a look at my code, it is simplified:

HTML:

 <div class="tab-bar"> <div class="tab-option" ng-class="(slide == 0 ? 'active' : '') ng-click="setSlide(0)"> Tab 1 </div> <div class="tab-option" ng-class="(slide == 1 ? 'active' : '') ng-click="setSlide(1)"> Tab 2 </div> 

 <ion-view> <ion-content> <div class="list"> <ion-slide-box on-slide-changed="slideHasChanged($index)" active-slide="slide"> <ion-slide> <ion-list ng-repeat="item in items"> My content and Image Here <img hires="{{item.realImageUrl}}" src="placeholderImage.jpg"/> </ion-list> </ion-slide> <ion-slide> <ion-list ng-repeat="item in items"> My content and Image Here <img hires="{{item.realImageUrl}}" src="placeholderImage.jpg"/> </ion-list> </ion-slide> </ion-slide-box> </div> </ion-content>

In my controller (this is very simplified, I don't want to worry about unrelated codes):

 slideHasChanged = function (index) { getMoreItems(); //get more data from server here. };

This is the directive:

 app.directive('hires', function() { return { restrict: 'A', scope: { hires: '@' }, link: function(scope, element, attrs) { console.log('link fired'); element.one('load', function() { console.log('load fired'); element.attr('src', scope.hires); }); } }; });

The problem is that the placeholder image works well the first time I come to this page and load the first batch of elements. But whenever I need to scroll down or toggle a tab, the placeholder image no longer works. The behavior is that it always shows the placeholder image, the real image is not displayed after it is fully loaded / downloaded.

Interestingly, because this method only works when loading a page? And it doesn’t work, because the transition tab or scrolling down does not load the page? If I want this to work for my situation, what changes are needed for this method?

I put two debugging messages in my directives, I exit the "link fired" and "fired" links. It turns out that the link function is started correctly, it just does not work element.one('load', function()) . Is it that the area somehow doesn't match? Any thoughts?

I tried a lot of code. And actually it sometimes works when I switch the tab or scroll down. But most of the time does not work. This is confusing; I don't know why this works sometimes.

+4
source share
3 answers

So, I finally got the right way to do this, just change the directive's link function to this:

 link: function (scope, element, attrs) { if (scope.hires != element.attr('src')) { element.attr('src', scope.hires); } }

Get element.one of element.one . This is the reason why it works only once.

0
source

I think that you are on the right track and should probably try to knit when the subject really becomes visible. There, a directive for this called InView is available here: https://github.com/thenikso/angular-inview . I have a somewhat similar problem for which I have bookmarks, but this is pretty far from my to-do list.

0
source

Try this for your directive:

 app.directive('hires', function() { return function(scope, element, attrs) { attrs.$observe('hires', function(value) { element.attr({ 'src': value }); }); }; });

Using $ observ here acts just like ng-src.

0
source

More articles:


All Articles