Ladeprogramm wird nicht auf AJAX-Anfrage in angular angezeigt js

Da verwende ich AJAX-Anfrage mit $ http. Es dauert lange, da meine Operation auf dem Server Zeit braucht. Ich muss den Loader während der Verarbeitung anzeigen, aber der Loader wird nicht angezeigt. Obwohl mein Code korrekt zu sein scheint. Ich habe verschiedene Methoden ausprobiert, aber nicht funktioniert.Ladeprogramm wird nicht auf AJAX-Anfrage in angular angezeigt js

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); 
     }); 
    }

Sin ce Ich werde isLoading als "true" beim Start aktivieren und dann, wenn die Anfrage abgeschlossen ist, mache ich isLoading "false". Wo ist das Problem im Code?

Quelle

2016-10-13 Umar

Sie setzen es auf dem '$ rootScope', so müssen Sie tun:' ng-show = "$ root.isLoading" ' – devqon

Aber das auch nicht funktioniert. Da rootscope auf alles innerhalb der App zugreifen kann – Umar

Ihr WebsiteServices-Code wird asynchron ausgeführt. Das bedeutet, dass der obige Code den Loader anzeigen und dann sofort wieder verstecken würde.

Um Async-Code in der Steuerung zu behandeln, müssen Sie eine Zusage vom Dienst zurückgeben und das Ausblenden des Drehfelds in eine Callback-Funktion unter Verwendung von einfügen.

Service:

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 
}

Controller:

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

Quelle

2016-10-13 11:27:20

Muss ich die Abhängigkeit von $ q einschließen? – Umar

Ja in Ihrem Dienst müssen Sie '$ q' injizieren. Es ist in eckig, so dass es nur injizieren –

sehr einfach und funktioniert, danke viel @Erik – Umar

this.insertMliveResponse = function(data){ 
     var defer=$q.defer(); 
     var requestURL='/mlive-portlet/rest/mliveResponseService/insertmLiveResponse'; 
     httpRequest(requestURL,data).then(function(data){ 
       defer.resolve(data.data); 
     },function(data){ 
      defer.reject(data.data); 
     }) 
     return defer.promise; 
    }

Quelle

2016-10-13 11:26:49

versuchen, defer.promise –

zu verwenden Warum muss ich defer.Promise zurückgeben? – Umar

Wenn Sie Anfrage dann machen werden, ich denke, die beste Art und Weise zu showhide loader interceptor

In meinem Schnipsel, ich benutze den Loader Service um den Loader zu aktivieren/deaktivieren

Für ZB:

// 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)

Quelle

2016-10-13 11:31:41

Ladeprogramm wird nicht auf AJAX-Anfrage in angular angezeigt js

Antwort

Verwandte Themen