预加载器在$http.Post(多步骤表单)

我在表单中提供预加载器时有问题。我遵循本教程在我的laravel项目中创建了一个多步骤表单。

这是我的基本表单。html:

<form id="appointment-form" name="appointmentform" ng-submit="processForm(appointmentform.$valid)">
    <!-- our nested state views will be injected here -->
    <div id="form-views" ui-view></div>
</form>

我的第一步表单是form.license.html:

<!-- form-license.html -->
<label>Nummerplaat ingeven</label>
<div class="form-group">
    <div class="col-xs-8 col-xs-offset-2">
        <input required type="text" class="form-control" name="license" ng-model="formData.license">
    </div>
</div>
<div class="form-group row">
    <div class="col-xs-4 col-xs-offset-4">
        <a ng-click="next(1)" ui-sref="form.profile" ng-disabled="!licenseValidated" class="btn btn-next btn-block">
            Volgende
        </a>
    </div>
</div>

在我的控制器中，我有以下内容:

$scope.next = function(step){
    if(step == 1) // licensePlate
    {
        // receive customer data
        $http.post('/api/licenseplate', { license: $scope.formData.license })
            .success(function(data, status, headers, config){
                var item = data.item;
                console.log(item);
                if(item) // fill in the name, address, email and telephone number
                {
                     $scope.formData.profile.name = item.owner_name;
                     $scope.formData.profile.street = item.owner_street;
                     $scope.formData.profile.zipcode = item.owner_zipcode;
                     $scope.formData.profile.city = item.owner_city;
                     $scope.formData.profile.email = item.owner_email[0];
                     $scope.formData.profile.telephone = item.owner_tel_no[0];
                }
            })
            .error(function(data, status, headers, config) {
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
            });
    }
    else if(step == 2)
    {
        // save customer data
        // get calendar appointments
        var current_date = (m+1) + '/' + d + '/' + y;
        $http.post('/api/calendar', { date: current_date })
            .success(function(data, status, headers, config){
                console.log(data);
                var item = data.items.item;
                item.sort(function(a, b) {
                    return a.column_id - b.column_id;
                });
                $scope.calendarData.pop();
                $scope.calendarData.push(item);
            })
            .error(function(data, status, headers, config) {
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
            });
    }
};
// function to process the form
$scope.processForm = function(isValid) {
    var appointment_date    = $scope.formData.appointment_date;
    var appointment_hour    = $scope.formData.appointment_hour;
    var column_id           = $scope.formData.column_id;
    var profile             = $scope.formData.profile;
    $http.post('/api/agendainsert', { appointment_datetime: appointment_date + appointment_hour, profile: profile, column_id: column_id })
        .success(function(data, status, headers, config){
            $location.path('/form/success/');
        })
        .error(function(data, status, headers, config) {
            console.log("Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + headers +
                "<hr />config: " + config);
    });
};

正如你所看到的，当step等于1时，我制作了一个$http.post。现在，当我单击next时，第二个表单直接加载。在只想去第二种形式，如果http。文章已成功加载。

我试过用一些angularjs预加载器库($http)这样做，但没有任何效果。有人能给我举个例子吗?