2013-05-06 2 views
1

Я создаю счетчик, используя угловой, и это мой первый проход. По какой-то причине, когда я обновляю значение timeRemaining, пользовательский интерфейс не обновляется. Я вижу, что строка, которая устанавливает новое значение, попадает, и новое значение действительно отличается, но не похоже, что значение $ scope обновляется (или, по крайней мере, привязка не запускается). Любые идеи, что я делаю неправильно?angularjs значение области не обновляется

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

Это мой HTML:

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

ответ

3

Вам не нужно использовать сервис для этого.

Вот рабочий код:

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

И вот рабочая скрипка: http://jsfiddle.net/bHh5M/1/

Кроме того, вы не должны делать слишком много в контроллере в соответствии с: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller - См. Раздел «Использование контроллеров правильно».

И вы можете посмотреть новую директиву ngAnimate.

Смежные вопросы