没有更新angularjs范围值 [英] angularjs scope value not updating
问题描述
我创建采用了棱角分明的计数器，这是我第一次通过。出于某种原因，当我更新 timeRemaining 值，用户界面不会更新。我可以看到，这台新的价值线正在热播，新价值的确是不同的，但它似乎并不像$范围值被更新（或至少是结合不被触发）。任何想法我做错了吗？
VAR everydayModule = angular.module（'每天'，[]）
.factory（'动画'，函数（$窗口，$ rootScope）{
VAR requestAnimationFrame = $ window.requestAnimationFrame ||
$ window.mozRequestAnimationFrame ||
$ window.msRequestAnimationFrame ||
$ window.webkitRequestAnimationFrame;
复位功能（框架）{
requestAnimationFrame（函数（）{
$ rootScope $申请（帧）。
}）;
};
}）;功能倒计时（timeRemaining，结束日期，动画）{
（功能框架（）{
VAR现在=新的日期（）;
VAR。一天= 24 * 60 * 60 * 1000;
timeRemaining = Math.abs（（endDate.getTime（） - now.getTime（））/。一天）;
动画（帧）;
}）（）;
}功能EverydayController（$范围，动画）{
$ scope.timeRemaining = 0;
$ scope.endDate =新的日期（2013，06，10）; 倒计时（$ scope.timeRemaining，$ scope.endDate，动画）;
};
这是我的HTML：
＆LT; HTML NG-应用=日常＆GT;
＆LT;身体GT;
＆LT; DIV NG控制器=EverydayController＆GT;
＆LT; DIV CLASS =时间ID =秒＆GT; {{timeRemaining}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
您不需要使用服务这一点。
这里的工作code：
VAR timeRemaining = 0;
VAR结束日期=新的日期（2013，06，10）;
VAR。一天= 24 * 60 * 60 * 1000;功能EverydayController（$范围）{
$ scope.timeRemaining = timeRemaining;
};
VAR requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.webkitRequestAnimationFrame;VAR循环=功能（）{
的UpdateModel（'秒'，功能（适用范围）{
VAR现在=新的日期（）;
scope.timeRemaining = Math.abs（（endDate.getTime（） - now.getTime（））/。一天）;
requestAnimationFrame（环）;
}）;
}requestAnimationFrame（环）;功能的UpdateModel（element_id，回调）{
VAR SC = angular.element（的document.getElementById（element_id））的范围（）。
SC。$应用（功能（SC）{
回调（SC）;
}）;
}
和，这里的工作小提琴：
http://jsfiddle.net/bHh5M/1/
此外，你不应该在你的控制器做太多，因为每：
http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller -
请参阅关于正确使用控制器的部分。
和你可能想看看新ngAnimate指令。
I am creating a counter using angular and this is my first pass. For some reason, when I update the timeRemaining value, the UI doesn't update. I can see that the line which sets the new value is being hit and the new value is indeed different, but it doesn't seem like the $scope value is being updated (or at least the binding is not being triggered). Any ideas what 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 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);
};
This is my HTML:
<html ng-app="Everyday">
<body>
<div ng-controller="EverydayController">
<div class="time" id="seconds">{{timeRemaining}}</div>
</div>
You don't need to use a service for this.
Here's the 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 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);
});
}
And, here's a working fiddle: http://jsfiddle.net/bHh5M/1/
Also, you shouldn't be doing too much in your controller as per: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller -- See the 'Using controllers correctly' section.
And you may want to look at the new ngAnimate directive.
这篇关于没有更新angularjs范围值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
