angularjs提供了內建的函式讓我們檢測到頁面的變化

$stateChangeStart   頁面開始跳轉

$stateChangeSuccess  頁面跳轉完畢

$viewContentLoaded   頁面內容渲染完畢

首次載入動畫指令  

首次進來時頁面渲染完畢讓.pageload消失 

app.directive('pageload',function($rootScope, $timeout) {
return {
restrict: 'EAC',
link: function(scope, element) {
 
$rootScope.$watch('$viewContentLoaded', function() {
$timeout(function() {
angular.element('.pageload').fadeOut(1500); 
                });
            });
        }
    };
});

app.directive('pageloading',function($rootScope, $timeout) {
return {
restrict: 'EAC',
link: function(scope, element
 
) {
$rootScope.$on('$stateChangeStart', function() {  //頁面開始跳轉
$timeout(function() {
element.removeClass('ng-hide');  //pageloading 開始顯示
});
      });
$rootScope.$on('$stateChangeSuccess', function() {  //頁面跳轉完畢
$rootScope.$watch('$viewContentLoaded', function() {  //監聽頁面 是否渲染完成 不包含資料請求部分

//延時1.5秒是因為頁面伴隨著資料請求,下面會提到如何解決
 

//刪除頁面首次載入的動畫的class名 即刪除pageload指令

angular.element('.pageload').removeClass('pageload');

資料請求一般都會用到ng-repeat 所以可以在ng-repeat後執行讓頁面切換動畫消失,但是上面的1.5秒後消失不建議刪除.

如果刪除後,頁面資料請求失敗那麼動畫將不會消失導致無法看到頁面

ngRepeat載入完畢後執行方法

app.directive('renderFinish', function($timeout) {
return {
restrict: 'EA',
link: function(scope,element,attr) {
if (scope.$last === true) {
console.log(scope.$index);
var finishFunc=scope.$parent[attr.renderFinish];
if(finishFunc)
                {
$timeout(function () {
finishFunc();
                    });
                }
            }
        }
    };
});

<div class="pageload">
    頁面首次載入的動畫</div>

<div class="pageloading">
    頁面切換的動畫</div>

<div render-finish="請求資料載入完畢後執行的函式,這裡就可以控制頁面動畫消失了" ng-repeat="">

請求資料載入完畢後執行的函式,這裡就可以控制頁面動畫消失了,1.5s還未渲染完畢,動畫也會消失(pageloading)