javascript - angularjs scope value not updating -


i creating counter using angular , first pass. reason, when update timeremaining value, ui doesn't update. can see line sets new value being hit , new value indeed different, doesn't seem $scope value being updated (or @ least binding not being triggered). ideas i'm doing wrong?

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 = 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); };

this html:

<html ng-app="everyday"> <body>     <div ng-controller="everydaycontroller">         <div class="time" id="seconds">{{timeremaining}}</div>     </div>

you don't need use service this.

here's working code:

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 = 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);     }); }

and, here's working fiddle: http://jsfiddle.net/bhh5m/1/

also, shouldn't doing in controller per: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller -- see 'using controllers correctly' section.

and may want @ new nganimate directive.


Comments

Post a Comment