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

我的要求是在每个$ route更改请求上显示一个微调图像，并在成功或错误时隐藏微调图像。我使用的角animate.js到$航线成功AngularJS在ng-animate完成后隐藏进度条

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

我需要隐藏进步图像（微调）新的页面加载后后，查看幻灯片（即：在完整的页面动画）

任何帮助，将不胜感激。

来源

2014-03-26 Sanjay D

在你的代码中，我没有看到任何显示你在为微调做什么的东西。所以这只会刺激你想要完成的事情。

一种选择是使用应用程序范围的进度栏。想想YouTube如何做页面转换。 Angular Loading Bar是一个很好的解决方案来实现这一点。我认为它使用$http interceptors来做(good explanation of interceptors)。

另一种选择是使用$routeChangeStart和$routeChangeSuccess属于$route提供商。你可以简单地有一个$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>

来源

2014-03-26 16:53:10 EnigmaRM

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

回答

相关问题