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完成後隱藏進度條

回答

相關問題