63 votes

Comment rafraîchir modèle de données à partir du serveur par programmation?

Arrière-plan

J'ai le plus de base "newbie" AngularJS question, pardonnez mon ignorance: comment puis-je actualiser le modèle via le code? Je suis sûr que c'est répondu plusieurs fois quelque part, mais je ne pouvais simplement pas la trouver. J'ai regardé quelques vidéos ici http://egghead.io et est allé rapidement sur le tutoriel, mais je sens que je suis absent quelque chose de très basique.

J'ai trouvé un exemple pertinent ici ($route.reload()) mais je ne suis pas sûr de comprendre comment l'utiliser dans l'exemple ci-dessous

Voici le programme d'installation

controllers.js

function PersonListCtrl($scope, $http) {
  $http.get('/persons').success(function(data) {
    $scope.persons = data;
  });
}

index.html

...
<div>
    <ul ng-controller="PersonListCtrl">
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
</div>
...

Tout cela fonctionne étonnamment bien, chaque fois que la page est rechargé je voir la liste des personnes comme prévu

Les questions

  1. Disons que je veux mettre en œuvre un bouton actualiser, comment puis-je dire le modèle pour recharger par programmation?
  2. Comment puis-je accéder au modèle? il semble Angulaire est la magie de créer une instance de mon contrôleur, mais comment puis-je obtenir mes mains sur elle?
  3. EDIT ajouté une troisième question, même en tant que #1 mais comment peut-il être effectuée uniquement par du JavaScript?

Je suis sûr que je suis absent quelque chose de base, mais après avoir passé une heure à essayer de comprendre, je pense que ce doit être une question. S'il vous plaît laissez-moi savoir si c'est en double et je vais fermer + lien vers elle.

72voto

Ben Lesh Points 39290

Vous êtes à mi-chemin sur votre propre. Pour mettre en œuvre un rafraîchissement, vous devriez juste envelopper ce que vous avez déjà en fonction sur le champ:

function PersonListCtrl($scope, $http) {
  $scope.loadData = function () {
     $http.get('/persons').success(function(data) {
       $scope.persons = data;
     });
  };

  //initial load
  $scope.loadData();
}

ensuite, dans votre balise

<div ng-controller="PersonListCtrl">
    <ul>
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
   <button ng-click="loadData()">Refresh</button>
</div>

En accédant à votre modèle", tout ce que vous devez faire c'est l'accès que $champ d'application.les personnes de tableau dans votre contrôleur:

par exemple (juste puedo code) de votre contrôleur:

$scope.addPerson = function() {
     $scope.persons.push({ name: 'Test Monkey' });
};

Ensuite, vous pouvez l'utiliser à votre avis, ou ce que vous voulez le faire.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X