ionic实现Android下拉更新时的Toast功能

引言:
主要使用Toast-PhoneGap-Plugin来实现Toast功能,但使用这个插件前,我们需要安装ngCordova
ionic实现Android下拉更新时的Toast功能_第1张图片

1. Ref_1:建立ngCordova:

http://ngcordova.com/docs/install/

$ bower install ngCordova

2. Ref_2:添加插件

插件的用法:https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin#2-screenshots

$ cordova plugin add cordova-plugin-x-toast 或者(cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git)
$ cordova prepare

3.引入脚本文件

在index.html 中的之前引入

<script src="lib/ngCordova/dist/ng-cordova.js">script>

4.在module中引入依赖


angular.module('starter', ['ionic', 'ngCordova'])
<body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-positive">
       <h1 class="title">Devdactic Simple List</h1>
     </ion-header-bar>

     <ion-content ng-controller="AppCtrl">
         <ion-list>
         <ion-refresher pulling-text="Pull to refresh"
         refreshing-text="Loading..."
         refreshing-icon="ion-loading-c"
         pulling-icon="ion-ios7-arrow-thin-down"
         on-refresh="doRefresh()">
         </ion-refresher>

         <ion-item ng-repeat="item in items">
            {{item}}
         </ion-item>
     </ion-list>

     </ion-content>
   </ion-pane>
 </body>
.controller('AppCtrl', function($scope, $cordovaToast) {
    $scope.items = ['First item', 'Second item', 'Third item'];

    $scope.doRefresh = function() {
        $scope.items.push('More items ' + Math.random());
        $scope.$broadcast('scroll.refreshComplete');

        $cordovaToast.showLongBottom('This could be your text!')
        .then(function(success) {
            // Do something on success
        }, function(error) {
            // Handle error
        });
    }
});

建立android

You need the Android SDK installed on your computer to build an Android version of your application using the steps below.
Make sure the Android SDK and the ant build tool are available on your system. The Android SDK is available here. Both the android and ant tools must be available in your path. To test your configuration, you should be able to execute both android and ant from the command line.

On the command line, make sure you are in the ionic-tutorial/conference directory

Add support for the Android platform:

ionic platform add android

Build the project:

ionic build android

The project is built in the conference/platforms/android folder

To build and run the application on an Android device connected to your computer using a USB cable:

ionic run android
致谢:
http://devdactic.com/pull-to-refresh-ionic/

你可能感兴趣的:(angularjs)