使用Angularjs中的指令創建ajax加載微調器

我正在嘗試創建一個簡單的加載器。以下是我迄今爲止所做的。有人可以請看看，讓我知道我要去哪裏錯了嗎？使用Angularjs中的指令創建ajax加載微調器

看來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/implements-loading-spinner-using-httpinterceptor-and-angularjs-1-1-5 –

@Balachandra多數民衆贊成在ajax這樣做的好方法，但我去了一個不同的解決方案，以便我可以隨時調用微調。 – 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>

這裏有一個普拉克它運行：http://plnkr.co/edit/SetecF03aY6TnQilryWt?p=preview

來源

2014-01-08 15:30:47

使用Angularjs中的指令創建ajax加載微調器

回答

相關問題