Директива не срабатывает при выборе вкладки/прокрутке страницы в AngularJS

Question

Что я хочу сделать, так это отобразить изображение заполнителя до полного загрузки реального изображения. И я нашел ответ here. Я использую точно такой же код, как и принятый ответ. Этот ответ неплохо подходит для нормальной ситуации.

Однако мое дело немного отличается. На моей странице у меня есть две вкладки. Я использую ion-slide-box для выбора вкладок. И я загружаю другой контент, когда пользователь переключает вкладки. Под каждой вкладкой это длинный список элементов. Каждый элемент имеет изображение, на котором я реализую этот метод отображения образа заполнителя. Пользователь может прокручивать вниз, чтобы увидеть больше элементов. Поэтому, когда пользователь прокручивает вниз, я загружу больше предметов.

Вот быстрый взгляд моего кода, оно упрощено:

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> 

В моем контроллере (это упростило много, я не хотят беспокоиться о несвязанных кодах):

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

Это директива:

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); 
      }); 
     } 
    }; 
}); 

Этот вопрос, заполнитель изображения хорошо работает в первый раз, когда я пришел на эту страницу и загрузить первую партию изделий. Но всякий раз, когда мне нужно прокручивать вниз или переключать вкладку, изображение заполнителя больше не работает. Поведение заключается в том, что он всегда показывает изображение заполнителя, реальное изображение не отображается после его полной загрузки/загрузки.

Интересно, потому что этот метод работает только при загрузке страницы? И не работает, потому что вкладка перехода или прокрутка вниз не приводит к загрузке страницы? Если я хочу, чтобы это работало для моей ситуации, какие изменения необходимы для этого метода?

Я поместил два отладочных сообщения в свои директивы, я выхожу из «ссылки уволен» и «уволен». Оказывается, что функция связи запускается правильно, это просто не element.one('load', function()). Является ли это тем, что область как-то не соответствует? Есть предположения?

Я пробовал код много. И на самом деле это иногда срабатывает, когда я переключаю вкладку или прокручиваю вниз. Но большинство времени не работает. Это сбивает с толку, я не знаю, почему это работает иногда.

Answer 1

Так что я, наконец, получил правильный способ сделать это, просто изменить link функцию директивы к этому:

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

Избавьтесь от element.one. Вот почему он работает только один раз.

Answer 2

Я думаю, что вы на правильном пути и должны, вероятно, попытаться связать, когда предмет действительно станет видимым. Для этого называется InView: https://github.com/thenikso/angular-inview. У меня есть несколько схожая проблема, для которой у меня есть закладки, но это довольно далеко от моего списка дел.

Answer 3

Попробуйте это для вашей директивы:

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

Использование $ наблюдать здесь действует так же, как нг-Src будет.