Erstellen eines AJAX-Lade-Spinner mit einer Direktive in Angularjs

Ich versuche, einen einfachen Loader zu erstellen. Unten ist was ich bisher gemacht habe. Könnte jemand bitte einen Blick darauf werfen und mich wissen lassen, wo ich falsch liege?Erstellen eines AJAX-Lade-Spinner mit einer Direktive in Angularjs

Es scheint, dass die CSS-Stile loading style-2 nicht hinzugefügt werden. mein DOM nur zeigt:

<span class=""></span>

Meine Richtlinie:

angular.module('loaderModule', [ 
    'restangular', 
]) 

.controller('appLoaderController', ['$scope', function ($scope) { 
    $scope.$on('LOAD', function() { 
     $scope.loading = "loading style-2" 
    }); 
    $scope.$on('UNLOAD', function() { 
     $scope.loading = "" 
    }); 
}]) 

.directive('spinLoader', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     template: '<span class="{{ loading }}"></span><div ng-transclude ></div>' 
    }; 
});

HTML:

<spin-loader> 
    <div ui-view></div> 
</spin-loader>

ich dann benutzen Sie es einfach durch den Aufruf: $scope.$emit('LOAD')

Quelle

2013-12-23 Prometheus

Sie vielleicht einen Blick auf http://stackoverflow.com/questions/ haben wollen 17838708/implementation-loading-spinner-using-httpinterceptor-and-angularjs-1-1-5 –

@Balachandra das ist eine nette Art, es für Ajax zu tun, aber ich ging für eine andere Lösung, so dass ich jederzeit den Spinner aufrufen kann. – Prometheus

Funktioniert gut für mich http://jsfiddle.net/Ks2Mq/ – dfsq

würde ich den Einsatz von ng-Klasse in Ihrer Richtlinie wie diese machen:

app.directive('spinLoader', function() { 
     return { 
      restrict: 'E', 
      transclude: true, 
      template: '<div ng-class="{loading: isLoading, style2: isLoading}" ng-transclude></div>' 
     }; 
    });

In Ihrem Controller Sie dann $scope.isLoading einstellen können wahr oder falsch zu sein.

app.controller('Ctrl', function ($scope) { 

     var dummyLoadingVariable = false; 

     $scope.$on('LOAD', function() { 
      $scope.isLoading = true; 
     }); 
     $scope.$on('UNLOAD', function() { 
      $scope.isLoading = false; 
     }); 

     $scope.toggleLoading = function(){ 
      dummyLoadingVariable = !dummyLoadingVariable; 

      if(dummyLoadingVariable){ 
       $scope.$emit('LOAD'); 
      } else { 
       $scope.$emit('UNLOAD') 
      } 
     } 

    });

Und der HTML es zu testen:

isLoading: {{ isLoading }} 
<br/> 
<spin-loader> 
    <div ui-view>Transcluded</div> 
</spin-loader> 

<br/> 
<button ng-click="toggleLoading()">toggleLoading()</button>

hier ein Plunk ist mit ihm läuft: http://plnkr.co/edit/SetecF03aY6TnQilryWt?p=preview

Quelle

2014-01-08 15:30:47

Erstellen eines AJAX-Lade-Spinner mit einer Direktive in Angularjs

Antwort

Verwandte Themen