Wie kann angularjs async implementiert werden?

Question

Ich benutze AngularJS v1.5.8, Meine Anforderung ist, wenn ich auf die Schaltfläche Weiter klicke, wird "Verarbeitung ..." innerhalb der Schaltfläche als Text angezeigt, bevor die Operation abgeschlossen ist, habe ich die $ q mit meinen Diensten enthalten, um die asynchrone Anlage, aber nicht funktioniert. Bitte beachten Sie meine untenstehenden Codes.

Dienst

mainApp.factory('PINVerificationServices', ['$http', '$rootScope','$q', function ($http, $rootScope) { 
    return { 
     IsPermitted: function (param) { 
      return $q($http({ 
       url: '/Api/ApiPINVerification/IsPermitted/' + param, 
       method: 'POST', 
       async: true 
      })); 
     } 
    }; 
}]); 

-Controller

mainApp.controller('PINVerificationController', function ($scope, $rootScope, $state, $window,$q, PINVerificationServices) { 
    $scope.SubmitText = "Next"; 

    $scope.Next = function() { 
    $scope.SubmitText = "Processing..."; 
    PINVerificationServices.IsPermitted($scope.PIN).then(function (result) { 
     $scope.SubmitText = "Next"; 
    }); 
    } 
} 

HTML

<div class="list-group list-group-sm"> 
    <div class="list-group-item"> 
     <input class="form-control" ng-model="PIN" placeholder="PIN" required id="PIN" name="PIN" type="text" /> 
    </div> 
    </div> 
    <button type="submit" ng-click="Next()">{{SubmitText}}</button> 

Answer 1

Try this:

return $http({ 
       method: 'POST', 
       url: '/Api/ApiPINVerification/IsPermitted/' + param 
     }); 

Answer 2

Machen Sie unten Änderungen (von Ihrer Anforderung von verschachtelten $http).

In Fabrik Nur $http, und keine Notwendigkeit, von $rootScope auch, sollte es so sein:

mainApp.factory('PINVerificationServices', ['$http', function ($http) { 
     return { 
       IsPermitted: function (param) { 
       return $http({ 
        url: '/Api/ApiPINVerification/IsPermitted/' + param, 
        method: 'POST' 
        }); 
       }, 

       GetStudentInformationByPIN : function() { 
       return $http({ 
        url: '/Api/ApiPINVerification/GetStudentInformationByPIN /',//your api url 
        method: 'GET' 
        }); 
       } 
      }; 
    }]); 

In Controller nutzen $q.all():

 mainApp.controller('PINVerificationController', function ($scope, $rootScope, $state, $window,$q, PINVerificationServices) { 
     $scope.SubmitText = "Next"; 
     $scope.Next = function() { 
      $scope.SubmitText = "Processing...";      
      $q.all([PINVerificationServices.IsPermitted($scope.PIN), 
      PINVerificationServices.GetStudentInformationByPIN($scope.PI‌N), 
      //other promises 
      ]).then(function (result) { 
        if(result[0].data){ 
         $scope.SubmitText = "Next"; 
        } 
        if(result[1].data){ 
         // studentdata response handling 
        } 
        }); 
      } 
     }