Создание ajax load spinner с помощью директивы в Angularjs

Я пытаюсь создать простой загрузчик. Ниже приводится то, что я сделал до сих пор. Может кто-нибудь, пожалуйста, взгляните и сообщите мне, где я ошибаюсь?Создание ajax load spinner с помощью директивы в Angularjs

Появляется стили CSS loading style-2 не добавляются. мой DOM просто показывает:

<span class=""></span>

Моя директива:

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>

Я тогда просто использовать его по телефону: $scope.$emit('LOAD')

источник

2013-12-23 Prometheus

вы можете захотеть взглянуть на http://stackoverflow.com/questions/ 17838708/implementation-loading-spinner-using-httpinterceptor-and-angularjs-1-1-5 –

@Balachandra - отличный способ сделать это для ajax, но я пошел на другое решение, чтобы в любой момент я мог назвать spinner. – Prometheus

Работает отлично для меня http://jsfiddle.net/Ks2Mq/ – dfsq

я использовал бы нг-класса в вашей директиве, как это:

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

В контроллере, то вы можете установить $scope.isLoading быть истинным или ложным.

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

    });

И HTML, чтобы проверить:

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

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

Вот Plunk с ним работает: http://plnkr.co/edit/SetecF03aY6TnQilryWt?p=preview

источник

2014-01-08 15:30:47

Создание ajax load spinner с помощью директивы в Angularjs

ответ

Смежные вопросы