Question

我正在尝试使用离子框架在移动应用中进行http调用。

以下是我的用户界面：

<ion-view title="Register">
    <ion-content overflow-scroll="true" padding="true" scroll="false" class="has-header has-footer" ng-controller="registerCtrl">
        <form class="list" name="regform" novalidate>
            <ion-list>
                <label class="item item-input" name="Number">
                    <span class="input-label">Number</span>
                    <input type="tel" name="num" placeholder="" ng-model="user.ph_no" ng-minlength="10" ng-maxlength="10" required>
                </label>
                <label class="item item-input" name="Email">
                    <span class="input-label">Email</span>
                    <input type="email" name="email" placeholder="" ng-model="user.email" ng-minlength="6" required>
                </label>
                <label class="item item-input" name="Password">
                    <span class="input-label">Password</span>
                    <input type="password" name="password" placeholder="" ng-model="user.password" ng-minlength="6" required>
                </label>
            </ion-list>
            <div class="padding">
                <p ng-show="regform.num.$error.required">* Phone Number is required</p>
                <p ng-show="regform.num.$error.minlength">* Phone Number should be 10 digits</p>
                <p ng-show="regform.num.$error.maxlength">* Phone Number should be 10 digits</p>
                <p ng-show="regform.email.$error.required">* Email is required</p>
                <p ng-show="regform.email.$error.minlength">* Email must be longer than 5 letters</p>
                <p ng-show="regform.password.$error.required">* Password is required</p>
                <p ng-show="regform.password.$error.minlength">* Password must be longer than 6 characters</p>
            </div>
            <ion-checkbox name="checkbox" ng-model="checked">I Agree with T&amp;C</ion-checkbox>
            <a ng-click="proceed()" class="button  button-block button-positive" ng-disabled="!checked || regform.$invalid">Proceed</a>
        </form>
    </ion-content>
</ion-view>

我在app.js文件中注册了一个HttpService服务。

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.service('HttpService', function($http) {
 return {
   getPost: function() {
     // $http returns a promise, which has a then function, which also returns a promise.
     return $http.get('http://jsonplaceholder.typicode.com/posts/1')
       .then(function (response) {
         // In the response, resp.data contains the result. Check the console to see all of the data returned.
         console.log('Get Post', response);
         return response.data;
       });
   }
 };
});

在控制器中，即controllers.js，我在ng-click事件中使用：

angular.module('app.controllers', ['ionic'])

.controller('registerCtrl', function($scope,backcallFactory, HttpService, $ionicLoading) {

    backcallFactory.backcallfun();
    $scope.user = {};

    $scope.proceed = function() {
        $ionicLoading.show({
            template: 'Loading...'
        });

        HttpService.getPost()
            .then(function(response) {
                $scope.user.ph_no = response;
                $ionicLoading.hide();
            });

    };
})

.factory('backcallFactory', ['$state','$ionicPlatform','$ionicHistory','$timeout',function($state,$ionicPlatform,$ionicHistory,$timeout){

        var obj={}
        obj.backcallfun=function(){
        var backbutton=0;

            $ionicPlatform.registerBackButtonAction(function () {
                if ($state.current.name == "register") {
                    /*var action= confirm("Do you want to Exit?");
                    if(action){
                        navigator.app.exitApp();
                    }//no else here just if*/

                     if(backbutton==0){
                        backbutton++;
                        window.plugins.toast.showShortCenter('Press again to exit');
                        $timeout(function(){backbutton=0;},5000);
                    }else{
                        navigator.app.exitApp();
                    }

                }
                else{

                        $ionicHistory.goBack();
                        /*$ionicHistory.nextViewOptions({
                        disableBack: true
                        });
                        $state.go('app.home');*/
                        //go to home page
                    }
            }, 100);//registerBackButton
        }//backcallfun
        return obj;
    }])

问题是，当我点击“继续”按钮时，它会停留在离子加载屏幕上。

我实际上是使用教程http://appcamp.io/courses/networking/fetching-data-api但是在按钮点击事件中。

有人能说出我错过了什么。

Answer 1

请检查您正在使用的cordova-android的版本。如果它超过了版本4，你需要一个白名单插件来获得＆＃34; http＆＃34;在应用中有效的通话。

检查一下，

Cordova / Ionic : $http request not processing while emulating or running on device

您的问题是您获取的所有内容都返回404并且错误处理不当，请尝试使用服务$ q中的promise来正确捕获错误。

无法进行http通话

1 个答案: