les infos de la page ne se mettent pas à jour directement avec $scope

Le problème exposé dans ce sujet a été résolu.

Bonjour, Je découvre angularjs doucement, et j'ai un petit souci (en effet, sinon je ne serais pas là…). Pour info, j'utilise en backend le framework sails pour profiter de l'api REST autogénérée et de socket.io nativement inclus avec quelques méthodes supplémentaires. Ainsi donc, mon problème peut se résumer dans deux fichiers.

Le controller : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
todoApp.controller('TodoCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
  $scope.todos = [];

  io.socket.get('/todo', function (resData) {
    $scope.todos = resData;
  });

  $scope.addTodo = function() {
    if($scope.newTodo.trim()){
      io.socket.post('/todo', { value: $scope.newTodo }, function (resData) {
        console.log("postTodo OK");
        console.log(resData);
        $scope.newTodo = "";
        $scope.todos.push(resData);
      });
    }
  }

  $scope.removeTodo = function(todo) {
    io.socket.delete('/todo/'+todo.id, function (resData) {
      $scope.todos.splice($scope.todos.indexOf(resData), 1);
    });                                                        
  }
}]);

et le template : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container" ng-controller="TodoCtrl">
    <div class="jumbotron">
        <h1 align="center">Todo Application</h1>
        <br>
        <div id="todo-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form ng-submit="addTodo()">
                    <input type="text" ng-model="newTodo" />
                    <button type="submit">Ajouter</button>
                </form>
            </div>
        </div>
    </div>
    <div id="todo-list" class="row">
        <div class="col-sm-4 col-sm-offset-4">
            <div class="checkbox" ng-repeat="singleTodo in todos">
                <label>
                    <input type="checkbox" ng-click="removeTodo(singleTodo)">
                    <strong>{{ singleTodo.value }}</strong> créé le {{ singleTodo.createdAt | date : 'dd MMMM yyyy HH:mm' }}
                </label>
            </div>
        </div>
    </div>
</div>

Pour ceux qui ne connaîtraient pas sails, voici la doc de io.socket.post() Je récupère ainsi dans resData le nouveau todo qui a été créé. Et au cas où, voici la déclaration du todo (model sails)

1
2
3
4
5
6
7
module.exports = {
  attributes: {
    value: {
      'type': 'text'
    }
  }
};

Alors mon problème : quand je clique sur ajouter, ma fonction addTodo() est appelée, j'ai bien les log suivant qui s'effectuent :

1
2
        console.log("postTodo OK");
        console.log(resData);

Donc la fonction callback s'est bien déroulée, et dans resData, j'ai bien le nouvel objet créé :

1
Object {value: "dsq", createdAt: "2015-10-20T21:19:18.063Z", updatedAt: "2015-10-20T21:19:18.063Z", id: 50}

MAIS : il ne va pas s'afficher avec les autres sur ma page html comme il le devrait avec le ng-repeat… MAIs : si je clique à nouveau sur le bouton envoyer OU si le clique sur l'une des checkbox, il est ajouté

De même, quand je clique sur l'une des checkbox, le todo sélectionné est bien supprimé en bdd, MAIS il est toujours affiché, SAUF si je clique sur une autre checkbox ou sur le bouton envoyer.

A croire que angular attende une action dans le controller pour mettre à jour les infos contenues dedans… Ce n'est pas tellement normal…

Merci de votre aide :-)

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte