Ionique (angularjs) ion-diapositive-boîte avec ng-repeat pas de mise à jour

J'ai un ion-slide-box à l'aide de ng-repeat de montrer des images qui sont récupérées à partir d'un serveur distant.

    <ion-slide-box on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true">
      <ion-slide ng-repeat="slide in files">
        <img ng-src="{{slide.filename}}" > 
      </ion-slide>
    </ion-slide-box>

et le js:

  $scope.getFiles = function() {
     Files.query({  
        //some parameters

     }).$promise.then(function(data) {
        $scope.files = data;
  });

Quand getFiles() est appelée (qui tire un service qui n'est pas montré ici), $champ d'application.fichiers est mis à jour avec succès. Mais le DOM (les images chargées dans le ion-diapositive-box) ne sont pas automatiquement mis à jour. Comment puis-je actualiser les DOM?? J'ai essayé timeout (rien ne se passe) et $scope.$apply (déclenche une erreur que $envoi déjà sterted.)

Même si c'est une application mobile, lors de l'essai de navigateur de bureau, je peux re-taille du navigateur et les images affichent automatiquement. Donc, soit j'ai trouver comment garder cette mise à jour, ou de trouver une meilleure image slider/carrousel à utiliser.

OriginalL'auteur lilbiscuit | 2015-01-08

angularjs ionic-framework

Vous avez besoin d'attendre la ng-repeat est rendu avant d'être en mesure de mettre à jour() de votre slidebox, l'utilisation de cette directive :

angular.module('starter')
 .directive('repeatDone', function () {
   return function (scope, element, attrs) {
     if (scope.$last) { //all are rendered
       scope.$eval(attrs.repeatDone);
     }
   }
})

HTML :

<ion-slide-box>
  <ion-slide ng-repeat="day in week" repeat-done="repeatDone()" >

Dans votre contrôleur

$scope.getFiles = function() {
 Files.query({  
    //some parameters

 }).$promise.then(function(data) {
    $scope.week = data;
});

$scope.repeatDone = function() {
  $ionicSlideBoxDelegate.update();
  //$ionicSlideBoxDelegate.slide($scope.week.length - 1, 1);
};

OriginalL'auteur dam1

16

Vous devez appeler la $ionicSlideBoxDelegate.update() méthode après avoir modifié la portée de la variable. La slidebox ne met pas automatiquement à écouter les changements dans la dernière version du framework.

http://ionicframework.com/docs/nightly/api/service/$ionicSlideBoxDelegate/

Vous devez définir un delegate-handle attribut et les utiliser pour vous assurer de ne pas interférer avec les autres slideboxes vous faites pour avoir chargé à l'époque.

html
```
<ion-slide-box delegate-handle="image-viewer" on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true">
  <ion-slide ng-repeat="slide in files">
    <img ng-src="{{slide.filename}}" > 
  </ion-slide>
</ion-slide-box>
```
js
```
$scope.getFiles = function() {
  Files.query({  
  //some parameters

  }).$promise.then(function(data) {
    $scope.files = data;
    $ionicSlideBoxDelegate.$getByHandle('image-viewer').update();
  });
}
```
Je crois que cela va changer dans un avenir proche, de sorte que votre code fonctionne comme prévu. Ils travaillent sur une mise à jour de slidebox composant mais il a été retiré à la dernière minute pour accélérer la version la plus récente.

Actuellement, le glisser-boîte de code ne peut pas trouver le délégué de la poignée si vous disposez d'un glisser-changé de fonction.
Je crois qu'avec tout le point de vue de la mise en cache des trucs. $getByHandle prend maintenant l'étendue active en considération, de sorte qu'il est parfois un peu difficile à trouver la bonne délégué. J'ai eu quelques problèmes en essayant d'obtenir le droit de gérer dans certaines situations. Les auxiliaires modaux en particulier.

OriginalL'auteur Jamie Sutherland
4

Pour travailler correctement, procédez de la manière suivante .
Après 8 heures de tests et de réaliser des recherche sur internet pour trouver la bonne solution.
```
<ion-slide-box on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true">
          <ion-slide ng-repeat="slide in files">
            <img ng-src="{{slide.filename}}" > 
          </ion-slide>
</ion-slide-box>
```
délégué-handle="image-viewer" ne pas avoir à être en ion-diapositive-box doit être en <ion-content delegate-handle="mainhanddle">
et à partir du contrôleur doit exécuter ces deux commandes:
```
$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.$getByHandle('mainhanddle').update();
```
À la fin de chaque appel.

À ajouter ici, <ion-slide-box delegate-handle="image-viewer" d'autres propriétés importantes comme les annuler et par exemple nr-répétition ne fonctionne pas correctement.

Bien, j'espère vous avoir aidé , si vous avez besoin de plus de détails n'hésitez pas à me contacter.

OriginalL'auteur Mauro Novillo
0

Au lieu de:
```
$scope.files = data;
```
Essayer:
```
$scope.files.splice(0,$scope.files.length);
$scope.files = $scope.files.concat(data);
```
Qui devraient vous permettre de mettre à jour le contenu de la matrice, sans perte de mémoire initiale de référence.

Note: je suis en supposant que $champ d'application.les fichiers et les données sont des tableaux.

OriginalL'auteur Dayan Moreno Leon

J'ai réussi à résoudre ce problème en utilisant la bibliothèque ion-image-lazy-load. Essayez avec cette démarche:

JS:

.controller('myCtrl', function ($scope) {
  $scope.images = imagesArray(); //Get array of objects with image urls
  $scope.slider = {
    options: {
     direction: 'horizontal',
     slidesPerView: '1',
     grabCursor: true
    }
  };
});

Vue:

<ion-content lazy-scroll>
   <ion-slide-box style="width:100% !important">
       <ion-slide ng-repeat="slide in images">
           <img image-lazy-src="{{slide.url}}" lazy-scroll-resize="true" image-lazy-loader="lines" style="width:100%">
       </ion-slide>
    </ion-slide-box>
</ion-content>

OriginalL'auteur Jesús Castro

Vous devez vous connecter pour publier un commentaire.