Skip to content

Instantly share code, notes, and snippets.

@eperedo

eperedo/app.js

Created June 5, 2013 20:50
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save eperedo/5717222 to your computer and use it in GitHub Desktop.
Save eperedo/5717222 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJs Directive for ladda buttons - https://github.com/hakimel/Ladda
Raw
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.save = function(){
$scope.loading = true;
$timeout(function(){
$scope.loading = false;
}, 3000);
};
});
Raw
demo.html
<!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>
Raw
directive.js
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();
}
});
}
};
});
@ValentinH
Copy link

I modified the code in order to use it within a ngRepeat loop. With this version, there is no need to specify an id for each button. The element is enough.

app.directive('ladda', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        if (element && element[0]) {
          var l = Ladda.create(element[0]);
          scope.$watch(attrs.ladda, 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