Bonjour,

J'affiche une liste et je veux récupérer les données d'un fichier JSON dans un SERVICE mais l'exécution de la lecture du fichier est trop long et je n'arrive pas à mettre à jour mon tableau items

j'affiche mes données dans mon template ci-dessous avec
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<list-Item></list-Item>
template :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<ion-view view-title="List test">
  <ion-content class="padding">
    <h3>List test</h3>
    <list-Item></list-Item>
  </ion-content>
</ion-view>
L'affichage pas par une directive et un template (j'utilise aussi ionic):

directive :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
app.directive('listItem', function() { 
   return { 
      templateUrl: 'views/directives/listItem.html',
      restrict : 'E',
      scope: true  
   }
})
template de ma directive :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<label class="item item-input item-stacked-label">
   <ion-list list-Item>
       <ion-radio ng-if="item.name" ng-repeat="item in items" ng-model="choice" ng-value="item.name"><b>{{item.name}} </b>- id: {{item.id}}</ion-radio>
   </ion-list>
 </label>
Mon controller appelle getItems où je récupère mon fichier et son contenu que j'affiche dans
Code : Sélectionner tout - Visualiser dans une fenêtre à part
alert (SUCCESS A)
pour vérifier mais il affiche en premier
Code : Sélectionner tout - Visualiser dans une fenêtre à part
alert (SUCCESS B)
avant, ce qui m'indique que l’exécution de ma lecture des données est trop longue. Du coup mon tableau items reste vide et je ne peux pas afficher ma liste.

Mon controller :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
app.controller('List', function ($scope,itemProvider) {
     $scope.items = itemProvider.getItems(); 
});
Mon service :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var items = [];
app.service('itemProvider', function($ionicPlatform,$cordovaFile) { 
    this.getItems = function () { 
              $ionicPlatform.ready(function () { 
                  // READ 
                 $cordovaFile.readAsText(cordova.file.dataDirectory, "test.json")
                   .then(function (success) { 
                       // success 
                       items = JSON.parse(success); 
                       alert("SUCCESS A : " + items); 
                   }, function (error) { 
                       // error 
                       alert("ERROR:" + error); 
                   });
              });
              alert("SUCCESS B : " + items);   
              return items; 
    } 
})
Si j'exécute la lecture du fichier à l'ouverture de l'application dans app.js ça marche, mon tableau items est bien initialisé... mais c'est pas logique de le faire ici (voir ci-dessous).

Quelqu'un peut-il m'aider à résoudre ce problème. Je débute sur AngularJS. Merci d'avance pour votre aide.

Solution qui marche mais qui n'est pas au bon endroit :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var app = angular.module('myApp', ['ionic', 'ngCordova'])
 
var items = [];
var dataFile = "test.json";
 
app.run(function ($ionicPlatform, $cordovaFile) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
 
        $cordovaFile.readAsText(cordova.file.dataDirectory, dataFile)
            .then(function (success) {
                items = JSON.parse(success);
            }, function (error) {
                // error
                alert("ERROR : " + error);
            });
 
    });
})