[英]AngularJS + Ionic is truncating scope value after the return from second page to the main page.
I have following code in the "First" Ctrl of the my app, which is displaying timer for countdown. 我在我的应用程序的“第一个”Ctrl中有以下代码,它显示倒计时的计时器。
Everything is working absolutely fine until i visited second page which is in the app.js defined by this way: 一切都工作得很好,直到我访问了第二页,这是在这样定义的app.js中:
.state('app.home', {
url: '/home:playlistData',
views: {
'menuContent' :{
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
.state('app.saved', {
url: '/saved',
views: {
'menuContent' :{
templateUrl: 'templates/saved.html',
controller: 'SavedCtrl'
}
}
})
If i came back from second view to the first counter is still displayed but value in the 如果我从第二个视图回到第一个计数器仍然显示但值
$scope.minutesLeft
Is not updated but 没有更新但是
setInterval
function is still executing the code in the background and updated data values are still holded in the Dataholdingservice. 函数仍在后台执行代码,更新的数据值仍保留在Dataholdingservice中。
I tried scope apply and timeout functions, but without the luck. 我尝试了范围应用和超时功能,但没有运气。
Could somebody tell me how can i solve this issue? 有人能告诉我如何解决这个问题?
Many thanks for any help. 非常感谢任何帮助。
Code of the HomeCtrl for countdown timer is following: 用于倒数计时器的HomeCtrl代码如下:
$scope.setTimer = function(timer) {
console.log(timer);
$scope.timer = timer;
};
$scope.saveTimer = function(timer) {
if($scope.selectedSounds.length == 0) {
$scope.showAlert("Add some sounds", "Cannot run timer for empty list");
} else {
$scope.clearCountDownAnimation();
var animationTimerId = setInterval(function () {
$("#minutesLeft").fadeTo(100, 0.1).fadeTo(200, 1.0);
}, 1000);
Dataholdingservice.setAnimationId(animationTimerId);
Dataholdingservice.setMinutesLeft(timer);
$scope.closePopover();
$scope.countDown();
}
};
$scope.clearCountDownAnimation = function() {
$("#minutesLeft").clearQueue().finish();
// Clear previously set animations
console.log(Dataholdingservice.getAnimationId());
if (Dataholdingservice.getAnimationId() != null) {
console.log("Interval cleared");
clearInterval(Dataholdingservice.getAnimationId());
}
};
$scope.countDown = function() {
var minutesLeft = Dataholdingservice.getMinutesLeft();
$scope.minutesLeft = minutesLeft;
$scope.isCounterDisplayed = Dataholdingservice.isCounterDisplayed();
var timerId = setInterval(function() {
console.log("Counting down");
minutesLeft -- ;
console.log("Decreasing minutes");
console.log(minutesLeft);
Dataholdingservice.setMinutesLeft(minutesLeft);
console.log("minutes left " + Dataholdingservice.getMinutesLeft());
$scope.$apply(function () {
$scope.minutesLeft = Dataholdingservice.getMinutesLeft();
});
if(minutesLeft <= 0) {
console.log("Time left");
clearInterval(Dataholdingservice.getTimerId());
clearInterval(Dataholdingservice.getAnimationId());
console.log(Dataholdingservice.isCounterDisplayed());
$scope.hideCounter();
$scope.stopAllSelectedSounds();
}
}, 1000 * 1);
Dataholdingservice.setTimerId(timerId);
};
$scope.hideCounter = function() {
console.log("Hidding the counter");
$scope.isCounterDisplayed = false;
$scope.$apply();
};
$scope.cancelTimer = function() {
clearInterval(Dataholdingservice.getTimerId());
clearInterval(Dataholdingservice.getAnimationId());
$("#minutesLeft").hide();
$ionicLoading.show({
duration: 500,
template: 'Timer canceled'
});
};
Since the $scope.minutesLeft
is a primitive datatype, sometimes the changes happening in the controller will not get reflected in the view. 由于
$scope.minutesLeft
是原始数据类型,因此控制器中发生的更改有时不会反映在视图中。 You can create an object like $scope.viewModel = {}
and then add the minutesLeft as a property to it like $scope.viewModel.minutesLeft = mintesLeft
in your countdown function and bind viewModel.minutesLeft
to the view. 您可以创建一个像
$scope.viewModel = {}
这样的对象,然后在您的倒计时函数$scope.viewModel.minutesLeft = mintesLeft
作为属性添加到$scope.viewModel.minutesLeft = mintesLeft
,并将viewModel.minutesLeft
绑定到视图。 you should see the value getting updated properly. 您应该看到正确更新的值。
I am not sure of your exact requirement, but I have put together the code for creating a simple timer that runs in the background in an angular service. 我不确定您的具体要求,但我已经将用于创建简单计时器的代码放在一起,该计时器在角度服务中在后台运行。 The working code is available at http://codepen.io/svswaminathan/pen/MYXOPM
工作代码可在http://codepen.io/svswaminathan/pen/MYXOPM获得
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.