Skip to content

Instantly share code, notes, and snippets.

@andreoav
Forked from eperedo/app.js
Created March 13, 2014 22:49
Show Gist options
  • Select an option

  • Save andreoav/9538814 to your computer and use it in GitHub Desktop.

Select an option

Save andreoav/9538814 to your computer and use it in GitHub Desktop.

Revisions

  1. @eperedo eperedo created this gist Jun 5, 2013.
    11 changes: 11 additions & 0 deletions app.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope, $timeout) {
    $scope.save = function(){
    $scope.loading = true;
    $timeout(function(){
    $scope.loading = false;

    }, 3000);
    };
    });
    26 changes: 26 additions & 0 deletions demo.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    <!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>
    20 changes: 20 additions & 0 deletions directive.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    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();
    }
    });
    }

    };
    });