Question

我有以下代码：

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

以下模板：

<img src="assets/img/refresh.svg" ng-class="{'reloading': reloading == true}">

当我不使用$scope.reload()时，它会完美地反映在视图中。但是，只要我使用该函数，视图就无法识别正在更改的布尔值。我已经检查过该函数是否正在运行，它确实运行了;在console.log之后添加$state.reload()就可以了。此外，该视图实际上还可以重新加载数据。

这里有什么问题..？

Answer 1

$state.reload()是

的别名

$state.transitionTo($state.current, $stateParams, { 
  reload: true, inherit: false, notify: false 
});

因此，您设置$scope.reloading = true;并立即重新加载状态，重置控制器，因此视图没有时间更改指示器，因为这一切都发生得很快。

所以我建议使用某种标志，允许你使用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();
    }
}]);

我在这里做的是，当您重新加载页面时，首先在会话中设置重新加载标志，然后重新加载页面。创建控制器时，我将$scope.reloading设置为会话中的值（$scope.reloading = sessionStorage.getItem('reloading') === 'true';），如果已设置 - 将从会话中删除该标志，并在2秒后隐藏指示符（使用$timeout服务）。

仅供参考 - angularjs有一个ngStorage模块，因此您可以在需要管理应用程序中的存储时使用它。

$ state.reload不刷新视图

1 个答案: