2016-08-23 2 views
5

Je rencontre un problème lors de l'utilisation de ng-table où les paramètres devant être transmis à ma fonction getData sont indéfinis. Je suis un nouveau à AngularJS et ng-table, donc toute aide serait appréciée. J'ai vérifié que les appels REST dans le code ci-dessous travail en les invoquant directement, de sorte que le problème est quelque part dans mon code/configuration angulaire.Params non défini dans la fonction getData de ng-table

De toute façon, voici un pseudo-exemple de mon contrôleur. Le code réel est sur un intranet, donc je ne peux pas le coller directement, alors pardonnez les fautes de frappe de la transcription. L'utilisation ng table et 1.5.8 angulaire 1.0.0:

myApp.controller('myCtrl', ['$scope', '$http', 'NgTableParams', 
    function($scope, $http, NgTableParams) { 
    $http.get('services/data/count').success(function(data) { 
     // this works fine 
     $scope.totalRows = data.rowCount; 
    }); 
    $scope.tableParams = new NgTableParams({ 
     page: 1 
     count: 20 
    }, { 
     total: $scope.totalRows, 
     getData: function($defer, params) { 
      // this line fails with params being undefined 
      $http.get('/services/data/' + params.page() + '/' + params.count()) { 
      .success(function(data) { 
       $scope.data = data; 
       $defer.resolve(data); 
      }); 
     } 
    }); 
}]); 

Et voici la pièce pertinente html:

<table ng-table="tableParams" class="table table-condensed table-striped"> 
    <tr ng-repeat="row in data"> 
     // row stuff here 
    </tr> 
</table> 

J'ai inséré des déclarations CONSOLE.LOG avant l'appel http getData, et params imprime comme indéfini.

+0

Je soupçonne que si vous '' console.log' votre variable $ defer', vous verrez l'objet s'attendaient à ce que les «params» tiennent. –

+0

Aussi, '$ http.Le succès est [obsolète] (https://docs.angularjs.org/api/ng/service/$http#deprecation-notice). Utilisez 'then (fonction (response), function (rejectectionReason))' à la place. –

+0

Le $ defer a les valeurs dont j'ai besoin. Je suppose que la question de ce débutant JS est "pourquoi?" Mais je peux aller de l'avant maintenant. Merci beaucoup. –

Répondre

5

Désolé, je ne me suis pas rendu compte que mon commentaire serait déroutant. Voici votre réponse:

La fonction que vous mettez dans la clé getData est supposée (par le NgTable API) pour prendre un seul argument, ce qui représente params. Autrement dit, le premier argument de votre fonction getData contient toujours les valeurs params, même si vous l'avez nommé $defer. Et le deuxième argument est toujours indéfini (l'API l'appelle avec un seul argument, après tout) même si vous l'avez nommé params.

Si vous souhaitez accéder à $defer (et il semble que vous faites), je pense que vous devriez l'injecter dans votre contrôleur (ajouter '$defer' à votre tableau de dépendance en haut, puis ajoutez $defer à la liste des arguments de votre contrôleur fonction dans la même position)

Il ressemblerait à ceci:.

myApp.controller('myCtrl', ['$scope', '$http', '$defer', 'NgTableParams', 
    function($scope, $http, $defer, NgTableParams) { 
    $http.get('services/data/count').success(function(data) { 
     $scope.totalRows = data.rowCount; 
    }); 
    // ... 
    getData: function(params) { 
     $http.get('/services/data/' + params.page() + '/' + params.count()) { 
     .success(function(data) { 
      $scope.data = data; 
      $defer.resolve(data); 
     }); 
    } 
+1

était '$ defer' inclus dans l'ancienne table ng? J'ai également remarqué que l'ancienne version utilisait des minuscules 'n' pour' ngTableParams' contrairement au courant qui utilise des majuscules 'NgTableParams'. – dork

0

La variable $ defer (merci Jesse Amano!) Avait les valeurs dont j'avais besoin. Je ne sais pas pourquoi cela fonctionne, mais je peux l'utiliser.

5

J'ai aussi couru dans cette question, quand je mis à jour mon ng table. Votre code devrait fonctionner dans les versions antérieures à la version 1.0.0. 1.0.0-beta.9 est la dernière version supportant votre code.

Dans le 1.0.0 change notes il est dit:

signature getData changement

Le defer $ paramater fourni à votre méthode getData a été supprimé. Au lieu de cela votre méthode getData doit retourner un tableau ou une promesse qui se résout en un tableau.

Pour migrer

Auparavant:

var tp = new NgTableParams({}, { getData: getData }); 

function getData($defer, params){ 
    // snip 
    $defer.resolve(yourDataArray); 
} 

maintenant:

var tp = new NgTableParams({}, { getData: getData }); 

function getData(params){ 
    // snip 
    return yourDataArrayOrPromise; 
}