[英]$state.reload doesn't refresh view
I've got the following piece of code: 我有以下代码:
launch.controller('HeaderController', ['$scope', '$state','$timeout', function($scope, $state, $timeout){
$scope.reloading = false ;
$scope.reload = function(){
$scope.reloading = true;
$state.reload();
$timeout(function(){
$scope.reloading = false;
$scope.$apply()
}, 2000);
}
}]);
And the following template: 和以下模板:
<img src="assets/img/refresh.svg" ng-class="{'reloading': reloading == true}">
When I do not use $scope.reload()
, it is perfectly reflected in the view. 当我不使用
$scope.reload()
,它会完美地反映在视图中。 However, as soon as I use the function, the view doesn't recognize the boolean being changed. 但是,一旦我使用该函数,该视图就无法识别正在更改的布尔值。 I've checked whether the function is running at all, and it does;
我已经检查了该函数是否正在运行,是否已经运行; Adding a
console.log
after $state.reload()
works just fine. 在
$state.reload()
之后添加console.log
可以正常工作。 Also the view actually does doe a reload of the data. 视图实际上也确实会重新加载数据。
What's the problem here..? 这是什么问题..?
$state.reload() is an alias of $ state.reload()是的别名
$state.transitionTo($state.current, $stateParams, {
reload: true, inherit: false, notify: false
});
So you set $scope.reloading = true;
所以你设置
$scope.reloading = true;
and immediately reload the state, resetting the controllers, so the view doesn't have time to change the indicator, because it all happens to fast. 并立即重新加载状态,重置控制器,因此视图没有时间更改指示器,因为这一切都很快。
So what I suggest is using a flag of some sort, to allow you to show the visual indicator using sessionStorage
: 所以我建议使用某种标志,以允许您使用
sessionStorage
显示可视指示器:
launch.controller('HeaderController', ['$scope', '$state','$timeout', function($scope, $state, $timeout){
$scope.reloading = sessionStorage.getItem('reloading') === 'true';
if( $scope.reloading ) {
sessionStorage.removeItem('reloading');
$timeout(function(){
$scope.reloading = false;
}, 2000);
}
$scope.reload = function(){
sessionStorage.setItem('reloading', 'true');
$state.reload();
}
}]);
What I did here is that when you reload the page, you first set a reloading flag in the session, and then reload the page. 我在这里所做的是,当您重新加载页面时,您首先在会话中设置了一个重新加载标志,然后重新加载了页面。 When the controller is created I set
$scope.reloading
by the value in the session ( $scope.reloading = sessionStorage.getItem('reloading') === 'true';
), if it was set - the flag is removed from the session, and hide the indicator in the view after 2 seconds (Using the $timeout
service). 创建控制器后,我通过会话中的值设置
$scope.reloading
( $scope.reloading = sessionStorage.getItem('reloading') === 'true';
),如果已设置-从会话,并在2秒钟后在视图中隐藏指示器(使用$timeout
服务)。
FYI - There is a ngStorage module for angularjs so you can use it when you need to manage the storage in your app. 仅供参考-angularjs有一个ngStorage模块,因此在需要管理应用程序中的存储时可以使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.