Récupérer variable AngularJS

Version imprimable

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:

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:

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 :D

03/04/2016, 14h22
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

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:

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:

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

Citation:

Envoyé par Moux88

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:

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:

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".

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:

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:

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 ?

05/04/2016, 12h18
Marco46

Citation:

Jusque là tout va bien.

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

Citation:

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.

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:

<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:

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 :)

Bonjour,

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

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