Controller, init, ajax et rien ne se passe

Version imprimable

Bonjour à tous,

je découvre pas à pas angularjs et je bloque sur un bout de code que je n'arrive pas à faire fonctionner.
Quand j'affiche ma page html, j'ai une div qui s'affiche avec écrit :

Code:

1
2
3
{{exo.Nom}}
{{exo.IdExercice}}
{{exo.Description}}

Angular ne remplace donc pas par les valeurs voulues, que ce soit avec la fonction
init ou init2.

De plus, pour la fonction init(idUser), aucun message ne s'affiche, que ce soit le message de
succès de la méthode ou celui de l'échec.

Merci pour les idées et/ou la solution.

Voici mon fichier javascript

Code:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
(function () {
    var app = angular.module('ExerciceStore', []);
 
    app.controller('ExoController', ['$http', function ($http) {
        this.exercices = [];
        $scope.init2 = function (idUser) {
            $http.get('http://localhost:50922/Service.svc/getLstExercice', { idUser: "'" + idUser + "'" }).success(function (data) {
                this.exercices = data;
            });
        };
 
        $scope.init = function (idUser) {
            $.ajax({
                type: "GET",
                url: "http://localhost:50922/Service.svc/getLstExercice",
                contentType: "application/json",
                data: "{\"idUser\" :\"" + idUser + "\"}",
                dataType: "json",
                success: function (result) {
                    alert('ok getListExercice');
                    this.exercices = result;
                },
                error: function (textStatus) {
                    alert(textStatus + ' ' + result.status + ' | ' + result.statusText);
                }
            });
        };
    }]);
 
    var _exercices = [
        {
            Nom: 'Azurite',
            idExercice: 110,
            Description: 'desc',
        },
        {
            Nom: 'Azurite',
            idExercice: 112,
            Description: 'desc',
        }];
})();

Voici mon code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div ng-controller="ExoController as store" ng-init="init(2);">
    <div class="divResumeExo" ng-repeat="exo in store.exercices">
        <div style="float:right">
            <button type="button" id="btnOpenDialog" class="boutonRond" alt="Supprimer" title="Supprimer l'exercice" onclick="fnOpenNormalDialog(exo);">
                <span class="glyphicon glyphicon-remove">X</span>
            </button>
            <div id="dialog-confirm"></div>
        </div>
        <p>{{exo.Nom}}</p>
        <p>{{exo.IdExercice}}</p>
        <p>{{exo.Description}}</p>
 
    </div>
</div>

19/08/2015, 10h16
Hippocrène

Salut,

essaye avec «{{ exo.Nom }}» c’est à dire avec une espace de chaque côtés de l’expression.

PS : tu peux aussi mettre le préfixe [AngularJS] en modifiant le message et en cherchant dans l’emplacement préfixe. Ça sera plus joli et plus facile à repérer pour quelqu’un cherchant une question «AngularJS». edit : merci :)
19/08/2015, 18h09
gobelet

J'ai essayé de rajouter les espaces et cela ne change rien.
Ce que je ne comprend pas, c'est que je n'ai aucun message qui s'affiche.
Ni alert('ok getListExercice'), ni alert(textStatus + ' ' + result.status + ' | ' + result.statusText);

Le webservice ne serait donc pas appelé ? La fonction init n'est pas appelé par l'évènement ng-init ?
20/08/2015, 10h29
Hippocrène

Il y a un exemple pas mal foutu ici.

Ça me rappelle aussi un post AngularJS (sur developpez.com et que je ne retrouve pas) qui avait une erreur qui pourrait être la tienne,
essaye de retirer la ligne :

Code:

$scope.init = function (idUser) {

Tu peux aussi essayer le «$http.post», je ne l’ai pas encore utilisé, mais il ne doit pas être inefficace (enfin, il me semble qu’il remplit les mêmes fonctions que «ajax»…). Je crois que «$.ajax» est du JQuery, «this» aussi, et il faut savoir qu’il vaut mieux ne pas mélanger les deux bibliothèques (je l’ai lu ici ^^').

Je suis débutant en AngularJS, mais je vais regarder ton code de plus près.

J'avais un problème avec la déclaration de mon controller. Je le déclarais dans une div alors que j'aurais dû le déclarer dans le body.
Chose faite.
Les informations s'affichent bien maintenant (sans passer par ma requête ajax, donc des données en dur déclarée dans mon .js).

Voici mon fichier js maintenant :

Code:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
app.controller('ExoController', function () {
        this.exercices = _exercices;
 
        this.init = function (idUser) {
            /*jquery.ajax({
                type: "GET",
                url: "http://localhost:50922/Service.svc/getLstExercice",
                contentType: "application/json",
                data: "{\"idUser\" :\"" + idUser + "\"}",
                dataType: "json",
                success: function (result) {
                    alert('ok getListExercice');
                    //this.exercices = result;
                },
                error: function (textStatus) {
                    alert(textStatus + ' ' + result.status + ' | ' + result.statusText);
                }
            });*/
        };
    });
 
    var _exercices = [
        {
            Series: [
                {
                    "shortDate": "",
                    "idSerie": 1,
                    "idExercice": 14,
                    "nbRepet": 12,
                    "poids": 5,
                    "distance": 10.0,
                    "duree": "2015-08-07T00:15:00",
                    "dateInsert": "2015-08-08T00:00:00",
                    "DifferenceObjectif": null
                }
            ],
            IdExercice: 14,
            Nom: "test1",
            nbSeries: 1,
            minOrRepet: 1,
            idUser: 2,
            Description: "deta",
            ObjectifSerie: null
        },
        {
            Series: [
                { "shortDate": "", "idSerie": 1, "idExercice": 14, "nbRepet": 12, "poids": 5, "distance": 10.0, "duree": "2015-08-07T00:15:00", "dateInsert": "2015-08-08T00:00:00", "DifferenceObjectif": null }
            ],
            IdExercice: 14,
            Nom: "test2",
            nbSeries: 1,
            minOrRepet: 1,
            idUser: 2,
            Description: "deta2",
            ObjectifSerie: null
        }]

Mais je voudrais modifier mon controller pour qu'il ne s'initialise qu'a l'appel de la méthode init().
J'ai essayé de le modifier comme ci dessous mais ça ne fonctionne plus lorsque je fais cette modification :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
app.controller('ExoController', function () {
        this.exercices = [];
 
        this.init = function (idUser) {
            this.exercices = _exercices;
            /*jquery.ajax({
                type: "GET",
                url: "http://localhost:50922/Service.svc/getLstExercice",
                contentType: "application/json",
                data: "{\"idUser\" :\"" + idUser + "\"}",
                dataType: "json",
                success: function (result) {
                    alert('ok getListExercice');
                    //this.exercices = result;
                },
                error: function (textStatus) {
                    alert(textStatus + ' ' + result.status + ' | ' + result.statusText);
                }
            });*/
        };
    });

21/08/2015, 09h39
Hippocrène

Je ne comprends pas très bien ce qu’est censé faire le dernier morceau de code.

L’ensemble exercice est vide, et _exercice aussi, non ?

Tu voudrais pouvoir afficher, le contenu de exercice ? Je crois que ça ne se fait pas comme ça. Ici et ici (en anglais, donc je ne suis sur qu’à moitié de ce que je vais écrire), on peut voir qu’il faut $scope pour afficher un résultat dans le HTML.

EDIT : Hun… j’ai oublié de rajouter les liens :( , et je ne me souviens plus de ceux que je voulais mettre… je vais faire un effort de mémoire

Je pense que un de ceux que je voulais mettre était celui-ci : http://stackoverflow.com/questions/1...js-controllers

C'est juste que je n'ai pas recopié la partie d'initialisation de _erxercices.

Pour corriger mon dernier post donc :

J'avais un problème avec la déclaration de mon controller. Je le déclarais dans une div alors que j'aurais dû le déclarer dans le body.
Chose faite.
Les informations s'affichent bien maintenant (sans passer par ma requête ajax, donc des données en dur déclarée dans mon .js).

Voici mon fichier js maintenant :

Code:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
app.controller('ExoController', function () {
        this.exercices = _exercices;
 
        this.init = function (idUser) {
            /*jquery.ajax({
                type: "GET",
                url: "http://localhost:50922/Service.svc/getLstExercice",
                contentType: "application/json",
                data: "{\"idUser\" :\"" + idUser + "\"}",
                dataType: "json",
                success: function (result) {
                    alert('ok getListExercice');
                    //this.exercices = result;
                },
                error: function (textStatus) {
                    alert(textStatus + ' ' + result.status + ' | ' + result.statusText);
                }
            });*/
        };
    });
 
    var _exercices = [
        {
            Series: [
                {
                    "shortDate": "",
                    "idSerie": 1,
                    "idExercice": 14,
                    "nbRepet": 12,
                    "poids": 5,
                    "distance": 10.0,
                    "duree": "2015-08-07T00:15:00",
                    "dateInsert": "2015-08-08T00:00:00",
                    "DifferenceObjectif": null
                }
            ],
            IdExercice: 14,
            Nom: "test1",
            nbSeries: 1,
            minOrRepet: 1,
            idUser: 2,
            Description: "deta",
            ObjectifSerie: null
        },
        {
            Series: [
                { "shortDate": "", "idSerie": 1, "idExercice": 14, "nbRepet": 12, "poids": 5, "distance": 10.0, "duree": "2015-08-07T00:15:00", "dateInsert": "2015-08-08T00:00:00", "DifferenceObjectif": null }
            ],
            IdExercice: 14,
            Nom: "test2",
            nbSeries: 1,
            minOrRepet: 1,
            idUser: 2,
            Description: "deta2",
            ObjectifSerie: null
        }]

Code:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
app.controller('ExoController', function () {
        this.exercices = [];
 
        this.init = function (idUser) {
            this.exercices = _exercices;
            /*jquery.ajax({
                type: "GET",
                url: "http://localhost:50922/Service.svc/getLstExercice",
                contentType: "application/json",
                data: "{\"idUser\" :\"" + idUser + "\"}",
                dataType: "json",
                success: function (result) {
                    alert('ok getListExercice');
                    //this.exercices = result;
                },
                error: function (textStatus) {
                    alert(textStatus + ' ' + result.status + ' | ' + result.statusText);
                }
            });*/
        };
    });
 
    var _exercices = [
        {
            Series: [
                {
                    "shortDate": "",
                    "idSerie": 1,
                    "idExercice": 14,
                    "nbRepet": 12,
                    "poids": 5,
                    "distance": 10.0,
                    "duree": "2015-08-07T00:15:00",
                    "dateInsert": "2015-08-08T00:00:00",
                    "DifferenceObjectif": null
                }
            ],
            IdExercice: 14,
            Nom: "test1",
            nbSeries: 1,
            minOrRepet: 1,
            idUser: 2,
            Description: "deta",
            ObjectifSerie: null
        },
        {
            Series: [
                { "shortDate": "", "idSerie": 1, "idExercice": 14, "nbRepet": 12, "poids": 5, "distance": 10.0, "duree": "2015-08-07T00:15:00", "dateInsert": "2015-08-08T00:00:00", "DifferenceObjectif": null }
            ],
            IdExercice: 14,
            Nom: "test2",
            nbSeries: 1,
            minOrRepet: 1,
            idUser: 2,
            Description: "deta2",
            ObjectifSerie: null
        }]

23/08/2015, 09h26
Hippocrène

Je ne sais pas si cela te sera utile, mais j’ai trouvé cela http://jsfiddle.net/gesellix/xxKjw/.

Sinon, je ne sais pas trop. Essaye de mettre le var _exercice au dessus de la fonction ou au dessus de l’initialisation.

J'ai réussi à faire fonctionner, en partie, mon code. Je ne passe plus par ng-init mais par
ng-show.

Le morceau de code qui me pose problème est le suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
app.controller('ExoController', ['$http', function () {
        this.exercices = [];
 
        this.init = function (idUser) {
            jQuery.ajax({
                type: "GET",
                url: "http://localhost:50922/Service.svc/getLstExercice?idUser="+idUser,
                contentType: "application/json",
                data: "{\"idUser\" :\"" + idUser + "\"}",
                dataType: "json",
                success: function (result) {
                    alert('ok getListExercice');
                    this.exercices = result;
                },
                error: function (textStatus) {
                    alert(textStatus + ' ' + result.status + ' | ' + result.statusText);
                }
            });
            return true;
        };
    }]);

Le "result" de mon webservice me retourne bien ce que je veux mais je n'arrive pas à affecter cette valeur à this.exercices, la valeur de la variable ne change pas.
Quand je regarde avec FireBug je vois bien le contenu de "result" mais la valeur de "this.exercices" ne correspond pas.
Je me demande s'il n'y a pas une histoire de closure.

Peut être faut il utiliser deux fonctions, comme dans ce programme :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function foo (callback){
    $.ajax({
    type:"POST",
    url:"ajax/companyInfo.php",
    data: dataString,
    success: callback
    });//end ajax
    alert (window.dada);
}
 
function mycallback (result){
    array=result.split('/');
    alert(window.dada);
}

J'ai trouvé la solution.
Il fallait mettre la requête en asynchrone + l'utilisation de $scope + supprimer les trace de $html.

Merci beaucoup en tout cas pour ton aide ! ^^

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
app.controller('ExoController', function ($scope) {
        $scope.exercices = [];
 
        $scope.init = function (idUser) {
            jQuery.ajaxSetup({ async: false });
            jQuery.ajax({
                type: "GET",
                url: "http://localhost:50922/Service.svc/getLstExercice?idUser="+idUser,
                contentType: "application/json",
                data: "{\"idUser\" :\"" + idUser + "\"}",
                dataType: "json",
                success: function (result) {
                    $scope.exercices = jQuery.parseJSON(result.d);
                },
                error: function (textStatus) {
                    alert(textStatus + ' ' + result.status + ' | ' + result.statusText);
                }
            });
            return true;
        };
    });