Angularjsでディレクティブを使用してajaxローディングスピナーを作成する

Question

私は単純なローダーを作成しようとしています。以下は私がこれまで行ってきたことです。誰か見てみて、私が間違っている場所を教えてもらえますか？

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

Answer 1

私はこのようなあなたのディレクティブでNG-クラスを利用するでしょう：あなたは真か偽であることを$scope.isLoadingを設定することができ、あなたのコントローラで

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

を。

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