Last active
August 29, 2015 14:06
-
-
Save dcustodio/84ac06674377188a9556 to your computer and use it in GitHub Desktop.
angularjs spinner directive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = angular.module('plunker', []); | |
| app.controller('MainCtrl', function($scope) { | |
| $scope.name = 'World'; | |
| $scope.loader= true | |
| }); | |
| /** | |
| * Created by David on 25/09/2014. | |
| */ | |
| /** | |
| * @ngdoc directive | |
| * @name directive:spinner | |
| * @restrict EA | |
| * @scope | |
| * | |
| * @description | |
| * replaces a icon for a spinner icon and after a timeout replaces for the original icon | |
| * | |
| * @example | |
| <spinner show="isLoading" class="fa fa-flash" spinner-class="fa fa-spinner fa-spin"></spinner> | |
| */ | |
| app.directive('spinner', ['$timeout', function ($timeout) { | |
| return { | |
| restrict: 'EA', | |
| template: '<i ng-class="currentClass" ></i>', | |
| scope: { | |
| show: '=', | |
| class: '@', | |
| spinnerClass: '@' | |
| }, | |
| replace: true, | |
| link: function (scope, elm, attrs) { | |
| //scope.currentClass = scope.class; | |
| scope.$watch('show', function () { | |
| if (scope.show) { | |
| scope.currentClass = scope.spinnerClass; | |
| $timeout(function () { | |
| //if hasn't change yet | |
| if (scope.show) { | |
| scope.currentClass = scope.class; | |
| } | |
| }, 1500); | |
| } else { | |
| scope.currentClass = scope.class; | |
| } | |
| }); | |
| } | |
| }; | |
| } | |
| ]); | |
| /** | |
| * @ngdoc directive | |
| * @name directive:simple-spinner | |
| * @restrict EA | |
| * @scope | |
| * | |
| * @description | |
| * shows a icon for a spinner icon and after a timeout hides the spinner | |
| * | |
| * @example | |
| <simple-spinner show="isLoading" class="fa fa-spinner fa-spin"></simple-spinner> | |
| */ | |
| app.directive('simpleSpinner', ['$timeout', function ($timeout) { | |
| return { | |
| restrict: 'EA', | |
| template: '<i ng-class="class" ng-show="show"></i>', | |
| scope: { | |
| show: '=', | |
| class: '@' | |
| }, | |
| replace: true, | |
| link: function (scope, elm, attrs) { | |
| // scope.showit = scope.show; | |
| scope.$watch("show", function () { | |
| if (scope.show) { | |
| $timeout(function () { | |
| //if hasn't change yet | |
| if (scope.show) { | |
| scope.show = false; | |
| } | |
| }, 1500); | |
| } else { | |
| scope.show = false; | |
| } | |
| }); | |
| } | |
| }; | |
| } | |
| ]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="plunker"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>AngularJS Plunker</title> | |
| <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> | |
| <link data-require="[email protected]" data-semver="4.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" /> | |
| <script data-require="[email protected]" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> | |
| <script> | |
| document.write('<base href="' + document.location + '" />'); | |
| </script> | |
| <script data-require="[email protected]" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> | |
| <script src="app.js"></script> | |
| </head> | |
| <body ng-controller="MainCtrl"> | |
| <p>Hello {{name}}!</p> | |
| <button ng-click="loader=true;" >load</button> | |
| <button ng-click="loader=false;">stop</button> | |
| <br> | |
| <simple-spinner show="loader" class="fa fa-circle-o-notch fa-spin"></simple-spinner> | |
| <br> | |
| <spinner show="loader" class="fa fa-user" spinner-class="fa fa-spinner fa-spin fa-2x"></spinner> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
plnker example