Discussion :

[topolino]

Bonjour,

J'ai un ecran qui affiche une liste d'items en fonction d'un interval de temps/date qui peut etre changer a tout moment par l'utilisateur à l'aide d'un calendrier.
Du 1er Fevrier au 12 --> j'affiche une liste.....
Du 12 Fevrier au 15 --> j'affiche une autre liste.....

Je veux que lorsque la date change que cela declenche une requete sur le controller afin d'aller chercher les bonnes données.

Ce que je fais fonctionne, mais je ne pense pas que ce soit la meilleure facon de faire.
Dans ma vue lorsque le calendrier se ferme je fais:

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
 
 $('#dateRange').dateRangePicker(
	        {
	            getValue: function () {
	                return this.innerHTML;
	            },
	            setValue: function (s) {
	                this.innerHTML = s;
	                e = document.getElementById('dateRange');
	                scope = angular.element(e).scope();
	                scope.$apply(function () {
	                    scope.query(s);
	                });
	            }
	        });

A la place j'aurais voulu observer la balise <h3> de ma date afin que du cote controller cela declenche la requete.

Merci pour vos conseil.

[Marco46]

Il est fortement conseillé de ne plus utiliser JQuery du tout avec Angular.

JQuery c'est de la programmation impérative (tu modifies le DOM à la main)
Angular c'est de la programmation déclarative (c'est Angular qui modifie le DOM pour le développeur en fonction des déclarations effectuées dans le HTML et en fonction du contrôleur)

Pour ce qui est des composants graphiques il y a Bootstrap et Angular ui ce qui évite d'utiliser les datepicker, autocomplete etc .. qui sont à la sauce JQuery.

C'est pas que JQuery c'est nul ou moins bien, c'est juste que c'est un peu comme si tu mixais côté serveur de la POO avec de la programmation fonctionnelle. C'est dangereux et pas clair.

Bref.

Ceci dit le soucis de ton post c'est que tu n'as pas posté la partie HTML donc difficile de répondre pour une question Angular de ce type sans connaitre la structure. Par exemple on ne sait pas ce que contient ta balise H3. Il y a un binding du modèle dedans ?

De même j'aurai aimé pouvoir lire le code de récupération des données.

Tu utilises un dateRangePicker, je suppose donc qu'il n'y a pas 1 date mais 2 ? Il s'agit donc de rafraîchir l'affichage lorsque la date de début ou de fin de recherche change ?

[topolino]

Je sais bien que c'est peu recommandé, mais il y a trop de librairies / composant encore sous Angular alors je fais de temps en temps qq exceptions.

Controler

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
 
$scope.firstDayOfTheWeek = Date.parse('last monday').toString('yyyy-MM-dd') + ' to ' + Date.parse(next + ' friday').toString('yyyy-MM-dd');
 
  TaskFactory.query(dateFrom, dateTo)
            .then(function(data) {
                $scope.timeSheets = data;
                angular.forEach(data, function(item) {
                    count += parseFloat(item.DaysWorked);
                    $scope.totalDaysWorked = count;
                });
            });

Vue

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
 
<div class="span6">
           <h3 style="color:white; text-align:right; cursor:pointer;" id="dateRange" >{{firstDayOfTheWeek}}</h3>
        </div>
 
  <script>
            $('#dateRange').dateRangePicker(
	        {
	            getValue: function () {
	                return this.innerHTML;
	            },
	            setValue: function (s) {
	                this.innerHTML = s;
	                e = document.getElementById('dateRange');
	                scope = angular.element(e).scope();
	                scope.$apply(function () {
	                    scope.query(s);
	                });
	            }
	        });
        </script>

Le calendrier apparait lorsque je click sur la balise <3> et change sa valeur.

Est ce un peu plus clair ?

[Marco46]

Tu pourrais utiliser un $watch :

http://docs.angularjs.org/api/ng.$rootScope.Scope

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$scope.$watch('firstDayOfTheWeek', function(newValue, oldValue) {
    TaskFactory.query();
});

[topolino]

J'avais deja essayé cette solution, mais ca ne fonctionne pas.
J'ai beau changer la date, le watch cote controller n'est jamais levé

[Marco46]

C'est pas normal ça devrait je l'ai déjà fait plusieurs fois sur un projet récent pour des datepicker de jQuery justement. Ya un truc que tu dois mal faire.

Si je me souviens bien il faut créer une directive qui encapsule ton datepicker, passer la valeur du scope à binder en paramètre de la directive par un attribut en définition un lien bidirectionnel ("="). Il faut ensuite assigner manuellement la valeur du datepicker à la bonne variable du scope lorsque l'utilisateur sélectionne une date. Et là ton watcher fonctionnera.

[topolino]

Tu me perds un peu, Aurais tu par hasard un exemple ?

[Marco46]

Un petit plunker que j'ai fait rapido. J'ai fait légèrement différemment.

Le principe c'est donc d'encapsuler le datepicker de jQueryUI dans une directive Angular et dans cette directive de modifier le model contenant la date lors de l'événement select du datepicker.
Pour détecter un changement de date il ne reste plus qu'à poser un watcher sur le model de la date. A chaque changement de date une alert est exécutée affichant l'ancienne date et la nouvelle.

Il y a cependant un défaut, le watch étant dans le contrôleur sans aucune forme de gestion de l'initialisation de la page il est exécuté au chargement de la page.

[topolino]

Merci pour ton code.
Lorsque l'on veut integrer des composants JQuery, il faut donc creer une directive ? J'en ai jamais fait, il va falloir que je m'y mette alors.
Je ne cpmprends pas tout mais merci

[topolino]

Super ca marche bien

[topolino]

Je trouve tres peu de chose sur $setViewValue et require : 'ngModel' peux tu m'en dire plus ?

[Marco46]

Je trouve tres peu de chose sur $setViewValue et require : 'ngModel' peux tu m'en dire plus ?

$setViewValue est une méthode de l'API NgModelController qui sert à modifier le modèle défini avec ngModel par programmation.

Un exemple que j'ai rencontré récemment dans la ng-grid : Effectuer un rollback sur la valeur d'un champ lorsque l'utilisateur appuie sur la touche échap.

Crées une nouvelle discussion quand tu as une nouvelle question stp