離子 - 從控制器強制刷新動畫

任何人都知道是否有辦法從控制器的離子刷新觸發刷新動畫？離子 - 從控制器強制刷新動畫

我想與進修紡紗啓動頁面

我試圖模擬與$ionicScrollDelegate.scrollBottom()拉動作，也通過在複習中設置delegate-handle和主叫從那裏$ionicScrollDelegate.$getByHandle('scroll').scrollBottom()沒有成功滾動。

有什麼想法？

在此先感謝！

來源

2014-10-16 atc

我終於創建了自己的指令，這個我分享，如果有人正在實現相同

loadingDirective.js

angular.module('app') 
.directive('loadingDirective', ['$compile', function($compile) { 
    'use strict'; 

    var loadingTemplate = '<div class="loading-directive"><i class="icon ion-loading-d" /></div>'; 

    var _linker = function(scope, element, attrs) { 
    element.html(loadingTemplate); 
    $compile(element.contents())(scope); 

    scope.$on('loading.hide', function() { 
     element.addClass('closing'); 
    }); 
    scope.$on('loading.show', function() { 
     element.removeClass('closing'); 
    }); 
    }; 

    return { 
    restrict: 'E', 
    link: _linker, 
    scope: { 
     content: '=' 
    } 
    }; 
}]);

loadingDirective.sass

loading-directive { 
    width: 100%; 
    font-size: 30px; 
    text-align: center; 
    color: $scroll-refresh-icon-color; 
    padding: 20px 0 10px 0; 

    height: 60px; 
    display: block; 


    @include transition(height, padding .2s); 

    .loading-directive { 
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 

    @include transition(transform .2s); 
    @include transition(-webkit-transform .2s); 
    } 

    &.closing { 
    height: 0px; 
    padding: 0px; 

    .loading-directive { 
     -webkit-transform: scale(0,0); 
     transform: scale(0,0); 
    } 
    } 

    i { 
    -webkit-animation-duration: 1.5s; 
    -moz-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    } 
}

要在模板中使用它，只是在內容的beggining添加<loading-directive>標籤：

template.html

<ion-view> 
    <ion-content> 
    <loading-directive></loading-directive> 
    <ion-refresher ng-if="refresherActive" pulling-text="Pull to refresh" on-refresh="refreshData()"> 
    <ion-list></ion-list> 
    </ion-content> 
</ion-view>

裝貨將顯示視圖時加載，直到收盤事件被觸發從控制器，$scope.$broadcast('loading.hide')將關閉加載圖標和$scope.$broadcast('loading.show')將再次顯示它

來源

2014-10-20 18:46:27 atc

無法通過Ionic的API觸發刷新。刷新組件通過滾動滾動區域（開始暴露刷新區域）來工作，這是用戶在下拉時必須執行的操作。

最好的辦法是顯示加載正在發生與其他一些接口組件。

來源

2014-10-18 19:49:41

感謝您的信息。我終於創建了一個自定義指令。我發佈了下面的代碼，如果有人有同樣的問題 – atc 2014-10-20 18:53:40

您可以只使用ion-spinner指令直接。下拉後，Ionic的拉到刷新顯示ion-spinner指令。

HTML：

<ion-spinner ng-if="isLoading"></ion-spinner>

JS：

（在你的控制器......）

$scope.isLoading = true; 

myFetchDataFunction().then(function() { 
    $scope.isLoading = false; 
});

來源

2015-08-04 21:01:14 yndolok

這麼簡單，但完美的作品。謝謝！ – janpio 2015-09-16 10:29:40

離子 - 從控制器強制刷新動畫

回答

相關問題