Question

我的要求是在每个$ route更改请求上显示一个微调器图像，并在成功或错误时隐藏微调器图像。我使用angular-animate.js在$ route success

之后滑动视图

<div ng-cloak ng-controller="sliderController">
<div ng-view ng-class="{slide: true, left: isDownwards, right: !isDownwards}">
</div>
</div>

我需要在加载新页面后隐藏进度图像（Spinner）（即：在完整的页面动画上）

任何帮助都将不胜感激。

Answer 1

在你的代码中，我没有看到任何显示你正在为微调器做什么的东西。所以这对于你想要完成的任务只是一个黑暗的刺痛。

一种选择是使用应用范围的进度条。想想YouTube如何进行页面转换。 Angular Loading Bar是实现这一目标的好方法。我认为它使用$http interceptors来(good explanation of interceptors)。

另一种选择是使用属于$route提供商的$routeChangeStart和$routeChangeSuccess。您只需拥有一个$scope变量即可触发图像是否可见。

$scope.$on("$routeChangeStart", function(event, next,current) {
    $scope.spinnerDisplayed = true;
});

$scope.$on("$routeChangeSuccess", function(event, next,current) {
    $scope.spinnerDisplayed = false;
});

然后你的HTML就会有一个基本的ng-show/hide

<div ng-show="spinnerDisplayed">
   <!-- some spinner image here -->
</div>

完成ng-animate后，AngularJS会隐藏进度条

1 个答案: