Discussion :

[Moux88]

Bonjour,

Voici mon problème :

Je ne connais pas bien AngularJS et je n'ai pas assez de temps pour approfondir ce langage.
C'est pourquoi :
J'aimerais récupérer une variable "time" présente en AngularJS pour pouvoir la réutiliser en Javascript.

voici le code AngularJS : (en rouge ce que je veux récupérer)

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
 $scope.addEvent = function() {
    console.log("adding event");
    var now = new Date();
    var event = {
        date: now,
        time: etime(10,00),
        duration: etime(2, 00),
        picto: 'blank.png',
        title: '',
        recurring: false,
        place: ''
    };
    $scope.events.push(event);
    $scope.dates = selectEvents($scope.events, $scope.minDate, $scope.maxDate);     
    $scope.editEvent(event);
  }

j'ai essayé de la récupérer comme ceci mais sans succès :

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
22
23
<script type="text/javascript"> //fonction qui gère l'emplacement d'un evenement
 
 
                function placement()
                    {
 
                    var b = new event();
 
                    var x = b.time;
                    var h = x.getHours();
                    var m = x.getMinutes();
 
                    var a = 178.2 *(h-8) + (178.2/60)*m - h + 8;
 
                    document.getElementById('fixecases').setAttribute("style", "margin-top:" + a.toString() + "px");
 
                        }
 
                        placement();
 
 
 
    </script>

Avez-vous une idée ?

Merci beaucoup

[sekaijin]

Angular n'est pas un langage

event est un événement pas une variable

du coup je ne comprends rien du besoin.

A+JYT

[Moux88]

Veuillez m'excuser je suis débutant en Web.

Je vais essayé de m'expliquer plus clairement :

J'aimerais pourvoir récupérer l'information "time" de l'évènement "event".

Ceci me permettrait, lorsque l'utilisateur aura choisi le "time" de son évenement, de pouvoir placer l'évenement à un endroit précis.
Cet endroit est une hauteur de pixel que je calcule dans une fonction javascript.

Est-ce un peu plus clair ?

Dans un controller la fonction suivante a été déclaré :

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
$scope.addEvent = function() {
    console.log("adding event");
    var now = new Date();
    var event = {
        date: now,
        time: etime(10,00),
        duration: etime(2, 00),
        picto: 'blank.png',
        title: '',
        recurring: false,
        place: ''
    };
    $scope.events.push(event);
    $scope.dates = selectEvents($scope.events, $scope.minDate, $scope.maxDate);     
    $scope.editEvent(event);
  }

Je cherche à récupérer le temps de cet évènement, voici ce que j'ai fait :

Code :

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

1
2
3
4
5
6
7
$scope.placement = function(){
    $scope.event.time = val;
    var h = parseInt(val / 3600);
    var m = (val / 60) % 60;
    var a = h + m;
    document.getElementById('fixecases').setAttribute("style", "margin-top:" + a.toString() + "px");
  }

ce temps doit me permettre de placer une div (id="fixecases") en fonction du temps de l'évènement "time"

Pouvez-vous me conseiller ?

Merci beaucoup

[Marco46]

Pouvez-vous me conseiller ?

Oui, deux règles à respecter strictement :

Pas de logique dans les contrôleurs en angularJs. Donc pas de déclaration de fonction.

Ce code :

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
$scope.addEvent = function() {
    console.log("adding event");
    var now = new Date();
    var event = {
        date: now,
        time: etime(10,00),
        duration: etime(2, 00),
        picto: 'blank.png',
        title: '',
        recurring: false,
        place: ''
    };
    $scope.events.push(event);
    $scope.dates = selectEvents($scope.events, $scope.minDate, $scope.maxDate);     
    $scope.editEvent(event);
  }

Doit être implémenté dans un service, lequel sera publié dans la vue.

2ème règle très importante, les modifications du DOM ne doivent se faire que dans les fonctions compile() et link() des directives.

Le code ci-dessous doit donc être implémenté dans une directive, probablement dans une fonction link().

Code :

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

1
2
3
4
5
6
7
$scope.placement = function(){
    $scope.event.time = val;
    var h = parseInt(val / 3600);
    var m = (val / 60) % 60;
    var a = h + m;
    document.getElementById('fixecases').setAttribute("style", "margin-top:" + a.toString() + "px");
  }

Autre conseil, ne jamais injecter le service $scope pour ne pas être tenté de l'utiliser. Utiliser la syntaxe controllerAs. Tu devrais trouver tout le nécessaire comme doc via google avec les mots clefs "angular" et "controllerAs".

[Moux88]

D'accord merci,

ça commence à se mettre en place dans ma tête
Pour aller étape par étape :

j'ai réussi à déplacer une div de 200px grâce à ce code :

Code :

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

1
2
3
4
5
$scope.placement = function() {    
 
     var myEl = angular.element( document.querySelector( '#fixecases' ) );
     myEl.css('margin-top','200' + "px");     
    }

en plaçant data-ng-init dans la div.

Jusque là tout va bien.

Maintenant j'aimerais déplacer mon élément non pas de 200px mais de la valeur du temps d'un évènement (que je dois surment convertir en pixel).

ce temps est dans ces évènements que je créer : (ici en rouge)

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
$scope.addEvent = function() {
    console.log("adding event");
    var now = new Date();
    var event = {
        date: now,
        time: etime(10,00),
        duration: etime(2, 00),
        picto: 'blank.png',
        title: '',
        recurring: false,
        place: ''
    };
    $scope.events.push(event);
    $scope.dates = selectEvents($scope.events, $scope.minDate, $scope.maxDate);     
    $scope.editEvent(event);
  }

par quoi dois-je changer 200px pour obtenir mon temps ?

[Marco46]

Jusque là tout va bien.

Non ça ne va pas bien tu modifies le DOM dans un contrôleur.

par quoi dois-je changer 200px pour obtenir mon temps ?

Lis la doc de la fonction etime. Personne ne peut te répondre, il ne s'agit pas d'une fonction javascript standard, c'est forcément un truc défini dans ton projet. Pour pouvoir faire ta conversion il faut savoir comment etime() fonctionne.

[Moux88]

Alors merci grâce à vos conseils j'ai compris que je ne pouvais pas modifier le DOM dans un controller mais plutot dans un link d'une directive.

J'aimerais alors changer le margin-top d'une DIV de 20px en utilisant une directive.

Comment-dois je m'y prendre ?

Voici ma DIV :

Code :

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

<div id="fixecases" class="item item-text-wrap" ng-repeat="event in date.events" ng-click="editEvent(event)">

Je me suis renseigné pour écire une directive mais je ne comprends pas trop. Voici la strusture que j'ai trouvé :

Code :

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

1
2
3
4
5
6
7
8
9
.directive('changeMargin', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {          
 
           });                      
        }
    }
});

Comment puis-je la remplir pour affecter le margin-top de ma DIV.

Merci beaucoup à vous

[Moux88]

Bonjour,

voila j'ai trouvé si ça peut intéresser des personnes .

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
22
23
24
.directive('ngDeplacer', function(){
    return{
 
        restrict : 'A',
        transclude : false,
        link : function(scope, element, attrs){
 
 
              var start= function(){
 
 
              element.css('margin-top','20' +"px");
 
 
 
              }
 
 
 
        }
 
 
    }
})