Question

因为我使用$ http使用ajax请求。由于我在服务器上的操作需要时间，因此需要很长时间。我需要在处理请求时显示加载程序，但加载程序不显示。虽然我的代码看似正确。我尝试了不同的方法，但没有用。

的index.html

<body ng-app="app">

    <!-- loader, can be used on multiple pages-->
    <div class="loading loader-quart" ng-show="isLoading"></div>

<!--         my logic       --> 

</body>

addCtrl.js

//method to get all the attributes and send to server using service
    $scope.add = function () {
        if ($scope.Option == 'newInstance')
            $scope.singleObject.FK_Name = 'MetisEmptyTemplate';
        $rootScope.isLoading = true;
        var featuresList = websiteService.getUpdatedTree($scope.treeDataSource);
        var formData = new Website("", $scope.singleObject.Name, $scope.singleObject.DisplayName, $scope.singleObject.Description, $scope.singleObject.State, "", $scope.singleObject.FK_Name, $scope.singleObject.Email, featuresList);

        websiteService.addwebsite(formData);
        $rootScope.isLoading = false;
    }

websiteService.js

//service to add website
    this.addwebsite = function (website) {
        $http({
            method: 'POST',
            url: $rootScope.url + 'Add',
            data: JSON.stringify(website),
            contentType: 'application/json'
        }).success(function (data) {
            alert(data);
        }).error(function (data, status, headers, config) {
            //alert(data);
        });
    }

因为我要将isLoading作为＆＃34; true＆＃34;在开始时，然后在请求完成后，我转向isLoading＆＃34; false＆＃34;。代码中的问题在哪里？

Answer 1

您的网站服务代码异步执行。这意味着上面的代码会显示加载器，然后立即再次隐藏它。

要处理控制器中的异步代码，您必须从服务返回一个promise，并使用.then()将微调器隐藏在回调函数中。

服务：

this.addwebsite = function (website) {
    var deferred = $q.defer();
    $http({
        method: 'POST',
        url: $rootScope.url + 'Add',
        data: JSON.stringify(website),
        contentType: 'application/json'
    }).success(function (data) {
        alert(data);
        deferred.resolve(data);
    }).error(function (data, status, headers, config) {
        //alert(data);
        deferred.reject(data);
    });
    return deferred.promise
}

控制器：

websiteService.addwebsite(formData).then(function(){
    $rootScope.isLoading = false
});

Answer 2

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Backpack\CRUD\CrudTrait;

class Car extends Model
{
    use CrudTrait;
    use CreatedByTrait; // <---- add this line

Answer 3

如果您提出要求，我认为show hide加载程序的最佳方式是interceptor

在我的代码片段中，我正在使用加载程序服务来激活/停用加载程序

对于Eg：

// http.config.js  file
export function httpConfig($httpProvider, AuthInterceptProvider) {
  'ngInject';
  AuthInterceptProvider.interceptAuth(true);

  // added for show loader
  $httpProvider.interceptors.push(function (loaderService, $q) {
    'ngInject';
    return {
      'request': function (config) {
        loaderService.switchLoaderModeOn();
        return config;
      },

      'requestError': function (rejection) {
        loaderService.switchLoaderModeOff();
        return $q.reject(rejection);
      },

      'response': function (response) {
        loaderService.switchLoaderModeOff();
        return response;
      },

      'responseError': function (rejection) {
        loaderService.switchLoaderModeOff();
        return $q.reject(rejection);
      }
    };
  });
}

// and in your module.js file
import {httpConfig} from './config/http.config';

.config(httpConfig)

装载程序没有以角度js显示在ajax请求上

3 个答案: