没有更新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:
< HTML NG-应用=日常>
<身体GT;
< DIV NG控制器=EverydayController>
< DIV CLASS =时间ID =秒> {{timeRemaining}}< / DIV>
< / DIV>
您不需要使用服务这一点。
这里的工作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屋!