Skip to content

Instantly share code, notes, and snippets.

@eperedo
Created June 5, 2013 20:50
Show Gist options
  • Save eperedo/5717222 to your computer and use it in GitHub Desktop.
Save eperedo/5717222 to your computer and use it in GitHub Desktop.
AngularJs Directive for ladda buttons - https://github.com/hakimel/Ladda
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.save = function(){
$scope.loading = true;
$timeout(function(){
$scope.loading = false;
}, 3000);
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://lab.hakim.se/ladda/css/ladda.css" />
<script data-require="angular.js@1.1.x" src="http://code.angularjs.org/1.1.5/angular.js" data-semver="1.1.5"></script>
<script src="http://lab.hakim.se/ladda/js/ladda.js"></script>
<script src="app.js"></script>
<script src="directive.js"></script>
</head>
<body ng-controller="MainCtrl">
<form data-ng-submit="save()">
<button id="w" type="submit" class="ladda-button blue zoom-in" ladda data-ng-model="loading">
<span class="label">Submit</span>
<span class="spinner"></span>
</button>
</form>
</body>
</html>
app.directive('ladda', function(){
return {
require: '?ngModel',
restrict: 'A',
link : function postLink(scope, attr, elem, ctrl){
var l = Ladda.create( document.querySelector('#'+elem.id));
scope.$watch('loading', function(newVal, oldVal){
if (newVal !== undefined){
if(newVal)
l.start();
else
l.stop();
}
});
}
};
});
@lyadeski
Copy link

lyadeski commented Oct 5, 2014

@ValentinH - nice modification! much better than the previous reliance on the ID

@spongessuck
Copy link

@ValentinH - This is perfect. A gold star for you, sir.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment