javascript - $state.reload 不刷新 View

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()时，它完美地反射(reflect)在 View 中。但是，一旦我使用该函数， View 就无法识别正在更改的 bool 值。 我已经检查了该功能是否在运行，确实如此；在 $state.reload() 之后添加一个 console.log 就可以了。 此外， View 实际上确实重新加载了数据。

这里有什么问题..？

Answer 1

$state.reload()是

的别名

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

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

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

我这里做的是，当你重新加载页面时，首先在session中设置一个reloading标志，然后重新加载页面。创建 Controller 时，我通过 session 中的值设置 $scope.reloading ($scope.reloading = sessionStorage.getItem('reloading') === 'true';)，如果它被设置 - 标志从 session 中删除，并在 2 秒后隐藏 View 中的指示器(使用 $timeout 服务)。

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