Javascript Girl
  1. Javascript Girl
  3. La valeur de portée angular ne se met pas à jour
Intereting Posts
Opérateur de javascript étrange: expr >>> 0 Détecter la touche Entrée dans un champ de saisie de texte Fournisseur Angularjs inconnu dans $ templateRequestProvider Accès à la variable personnalisée au niveau des visiteurs précédemment stockée Comment supprimer l'élément dom? Support du navigateur pour l'utilisation d'un mot réservé en tant que nom de propriété en JavaScript Pourquoi ma fonction AJAX appelle-t-elle le rappel plusieurs fois? Meilleures pratiques pour stocker JSON dans DOM J'ai besoin d'aide pour comprendre le développement de l'alliage de titane (MVC) JQuery $ (document) .ready () et document.write () AngularJS: Exécution d'une requête $ http à l'intérieur du service personnalisé et des données de retour Appliquer toutes les matrices de transformation Node.js et demandes intensives en processeur "Exception inconnue" lors de l'annulation de la page déchargée avec "location.href" Pourquoi puis-je utiliser une fonction avant qu'elle ne soit définie en version javascript?

La valeur de portée angular ne se met pas à jour

Je crée un compteur utilisant angular et c'est mon premier passage. Pour une raison quelconque, lorsque je met à jour la valeur timeRemaining , l'interface utilisateur ne se met pas à jour. Je peux voir que la ligne qui définit la nouvelle valeur est frappée et la nouvelle valeur est en effet différente, mais il ne semble pas que la valeur de la portée soit mise à jour (ou au moins la liaison n'est pas déclenchée). Des idées sur ce que je fais mal? 

 var everydayModule = angular.module('Everyday', []) .factory('animate', function ($window, $rootScope) { var requestAnimationFrame = $window.requestAnimationFrame || $window.mozRequestAnimationFrame || $window.msRequestAnimationFrame || $window.webkitRequestAnimationFrame; return function (frame) { requestAnimationFrame(function () { $rootScope.$apply(frame); }); }; }); function countdown(timeRemaining, endDate, animate) { (function frame() { var now = new Date(); var oneDay = 24 * 60 * 60 * 1000; timeRemaining = Math.abs((endDate.getTime() - now.getTime()) / oneDay); animate(frame); })(); } function EverydayController($scope, animate) { $scope.timeRemaining = 0; $scope.endDate = new Date(2013, 06, 10); countdown($scope.timeRemaining, $scope.endDate, animate); };

C'est mon HTML: 

 <html ng-app="Everyday"> <body> <div ng-controller="EverydayController"> <div class="time" id="seconds">{{timeRemaining}}</div> </div>

Vous n'avez pas besoin d'utiliser un service pour cela.

Voici le code de fonctionnement: 

 var timeRemaining = 0; var endDate = new Date(2013, 06, 10); var oneDay = 24 * 60 * 60 * 1000; function EverydayController($scope) { $scope.timeRemaining = timeRemaining; }; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.webkitRequestAnimationFrame; var loop = function () { updateModel('seconds', function(scope){ var now = new Date(); scope.timeRemaining = Math.abs((endDate.getTime() - now.getTime()) / oneDay); requestAnimationFrame(loop); }); } requestAnimationFrame(loop); function updateModel(element_id, callback){ var sc = angular.element(document.getElementById(element_id)).scope(); sc.$apply(function(sc){ callback(sc); }); }

Et voici un violon de travail: http://jsfiddle.net/bHh5M/1/

De plus, vous ne devriez pas faire trop dans votre contrôleur selon: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller – Consultez la section "Utilisation des correcteurs correctement".

Et vous voudrez peut-être regarder la nouvelle directive ngAnimate.