remotty / angular-ladda Goto Github PK

When ladda get's updated to version 2.0.0 angular-ladda will crash. Changing it's dependency to lower (<2.0.0) solves the issue.

Would have been really cool with a ladda-text option, which changes the buttons text to it's value when ladda is active, and back to original text when ladda is not active.

I'll make a pull req.

Btw, great work 💯

what is the best way to make sure that only the touched button will be animating?

no bueno:
http://remotty.github.io/angular-ladda

As well known, there is no need to distribute the package with test folder, neither npm nor bower.
it increase the package size unnecessarily.

it would be awesome to set the default animation instead of hard coding zoom-in

Hello,

I have following form which works totally OK:

<form role="form" name='signUpForm' novalidate>
            <fieldset>
                <legend>Create new account</legend>
                <div class="form-group" show-errors>
                    <label class="control-label" for="email">Your email address</label>
                    <input id="email" name="email" type="email" ng-model="registrationData.email" class="form-control" required>

                    <p class="help-block" ng-if="signUpForm.email.$error.required">You need to fill your email address.</p>
                    <p class="help-block" ng-if="signUpForm.email.$error.email">Given email address is invalid.</p>
                </div>

                <div class="form-group" show-errors>
                    <label class="control-label" for="password">Password</label>
                    <input type="password" name="password" id="password" ng-model="registrationData.password" class="form-control" placeholder="Password" required>

                    <p class="help-block" ng-if="signUpForm.password.$error.required">You need to fill out your password.</p>
                </div>
            </fieldset>
            <hr>

            <button class="btn btn-primary btn-block ladda-button">Sign up</button>

When I add Ladda with following code, the validation error messages are printed twice.

<form role="form" name='signUpForm' novalidate ladda="laddaLoad">
            <fieldset>
                <legend>Create new account</legend>
                <div class="form-group" show-errors>
                    <label class="control-label" for="email">Your email address</label>
                    <input id="email" name="email" type="email" ng-model="registrationData.email" class="form-control" required>

                    <p class="help-block" ng-if="signUpForm.email.$error.required">You need to fill your email address.</p>
                    <p class="help-block" ng-if="signUpForm.email.$error.email">Given email address is invalid.</p>
                </div>

                <div class="form-group" show-errors>
                    <label class="control-label" for="password">Password</label>
                    <input type="password" name="password" id="password" ng-model="registrationData.password" class="form-control" placeholder="Password" required>

                    <p class="help-block" ng-if="signUpForm.password.$error.required">You need to fill out your password.</p>
                </div>
            </fieldset>
            <hr>


            <button class="btn btn-primary btn-block ladda-button" ng-click="signUp()">
                <span class="ladda-label">Sign up</span>
            </button>

Also, writing a dot (.) in the email field somehow screws up focus. None of these things are happening without ladda.

Other libraries that are used in the project:

• Mobile Angular UI
• Angular JS 1.3.8
• Angular Bootstrap Show Errors

it should be companied with angular dependency when using the amd

This issue happens when I leave the state

I got this error after rebuild angular, previously i build this project without error.
I have included this module in angular module and include all script in index.html.

Failed to instantiate module angular-ladda due to:
[$injector:nomod] Module 'angular-ladda' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument

i found shortcut to change file vendor.js to last vendor.js before error, and it's work. It isn't proper way to fix this problem.

Marissas-MacBook-Pro:~ Marissa$ bower install angular-ladda
bower not-cached https://github.com/remotty/angular-ladda.git#*
bower resolve https://github.com/remotty/angular-ladda.git#*
bower download https://github.com/remotty/angular-ladda/archive/0.4.3.tar.gz
bower extract angular-ladda#* archive.tar.gz
bower invalid-meta for:/var/folders/rg/2w1f9r6s6gv6fg1m3zj5xrl00000gn/T/Marissa/bower/e4888fb6124b03b2a432c7f046afcd03-16101-Lun2hp/bower.json
bower invalid-meta The "main" field cannot contain minified files
bower resolved https://github.com/remotty/angular-ladda.git#0.4.3
bower not-cached https://github.com/hakimel/Ladda.git#>=0.9.8
bower resolve https://github.com/hakimel/Ladda.git#>=0.9.8
bower download https://github.com/hakimel/Ladda/archive/1.0.0.tar.gz
bower retry Download of https://github.com/hakimel/Ladda/archive/1.0.0.tar.gz failed with EHOSTUNREACH, trying with git..
bower checkout ladda#1.0.0
bower ECMDERR Failed to execute "git clone https://github.com/hakimel/Ladda.git -b 1.0.0 --progress . --depth 1", exit code of #128 Cloning into '.'... fatal: unable to access 'https://github.com/hakimel/Ladda.git/': Couldn't connect to server

Additional error details:
Cloning into '.'...
fatal: unable to access 'https://github.com/hakimel/Ladda.git/': Couldn't connect to server
Marissas-MacBook-Pro:~ Marissa$

I would like to suggest to make a remark in the readme.md file that the order of the javascript includes is really important. If you include first ladda.js and than spinner.js you will end up with very strange exceptions. Took me two hours to find the problem ;-(

hi,

I add angular-ladda to my project and ladda.min.css override bootstrap's default button css. Using ladda-themeless.min.css solving this problem, but I do not know how to configure my angular's gruntfile or bower.json to load the css file.

I use yeoman to setup my project.

Pls help, and thanks a lot.

When added to an element with dynamic content, for example:

<spam>{{ itemsAdded ? 'Remove' : 'Add' }} items</span>

angular-ladda only compiles it once.

When the directive is inside an animated view (one that expands or slides) the ladda directive calculates immediately forcing the height and width of the spinner to be 0px. Can we wrap the link function in a $timeout so that it can wait until the DOM is loaded?

For the following code, using angular ladda version 0.3.1:

<button type="button" class="btn btn-success" data-dismiss="modal" ng-disabled="changeform.$invalid || !valuesChanged()" ng-click="submit()" ladda="loadingStatus.loading" data-style="expand-left">{{'Change' | translate}}</button>

I get an ugly box below the button when I click it. The ladda-spinner appears, but so does the box. (I wasn't quick enough to catch both at the same time though, so in this screen shot you can only see the ugly box):

As title says, I've double checked. Because i use grunt bowercopy to copy over only needed files from the bower_components dir, and because I had added the angular-ladda file (apparently bowerCopy does not give an error when copying missing files...huh?) this becomes a very hard bug to detect.

I think that this issue is trying to say the same but it does not really ehm... becomes clear :)

Does angular-ladda support the usage of angular-translate?

As this package will mostly work with other angular third-party(or not) packages, non of them specify angular as dependency due to angular is a top dependency against these packages.

it could cause problems with npm 2.x.

I get this after setting ladda=true

Immediately, no animations at all. No matter which one I set.

Hi,

I keep getting an endless animation with the spinner. This my JS code to activate/deactivate the loading state.

function exportUserHistory() {
      if ( !vm.canExportHistory )
        return;

      vm.exportLoading = true;
      $scope.exportLoading = true;

      var json = JSON.stringify(historyItems),
          blob = new Blob([ json ], { type: 'application/json;charset=utf-8' });

      saveAs(blob, 'watch_history.json');

      setTimeout(function () {
        vm.exportLoading = false;
        $scope.exportLoading = false;
      }, 5000);
    }

<div>
        <button class="export-button"
                ng-class="{'export-button-disabled':!cleanvm.canExportHistory}"
                ng-disabled="!cleanvm.canExportHistory"
                ladda="cleanvm.exportLoading" <!-- or exportLoading with $scope -->
                ng-click="cleanvm.exportUserHistory()">
            Export Backup
        </button>
    </div>

I have tested with controllerAs and vm variable and $scope and it is the same result an endless animation. I have debugged and vm.exportLoading = false; $scope.exportLoading = false; are set to false.

I'm using "angular": "^1.5.6" and "angular-ladda": "^0.3.4"

(function () {
  angular
    .module('app.core')
    .config(laddaConfig);

  /* @ngInject */
  function laddaConfig(laddaProvider) {
    laddaProvider.setOption({ style: "zoom-in" });
  }
})();

(function () {
  angular
    .module('app.core', [ 'angular-ladda' ]);
})();

I tried this but didn't work.

angular.module(xxxx)
  .config(function (laddaProvider) {
    laddaProvider.setOption({
      style: 'expand-left',
      size: 35
    });
  })

Hello @subicura,
I am the member of cdnjs project.
We want to host this library.
I found the latest version is v0.3.4 on github, but the latest version on npm is v0.3.3. Could you update the latest version on npm?
Thanks very much!

cdnjs/cdnjs#8420

Error "Invalid argument" is generated using IE11 debugging console when the button label is a variable.

"Invalid argument" error on IE11 debugging console

<button type="submit" ladda="loading" ng-click="uploadResource()" ng-class="{disabled: uploadBtnDisable}" class="btn btn-success">{{uploadBtnText}}</button>

no error when wrapping within <span>

<button type="submit" ladda="loading" ng-click="uploadResource()" ng-class="{disabled: uploadBtnDisable}" class="btn btn-success"><span class="ladda-label">{{uploadBtnText}}</span></button>

no error when the button label is not a variable

<button type="submit" ladda="loading" ng-click="uploadResource()" ng-class="{disabled: uploadBtnDisable}" class="btn btn-success">Add Resource</button>

version of angular and ladda that we are using:

angular-ladda#0.1.9 app\components\angular-ladda
├── angular#1.3.8
└── ladda#0.9.4

When applying ladda to the button which is within the form then its throws error

TypeError: r[0].querySelector is not a function
at link (http://localhost/loopin/bower_components/angular-ladda/dist/angular-ladda.min.js:2:880)
at ka (http://localhost/loopin/bower_components/angular/angular.min.js:79:16)
at u (http://localhost/loopin/bower_components/angular/angular.min.js:66:326)
at g (http://localhost/loopin/bower_components/angular/angular.min.js:58:136)
at u (http://localhost/loopin/bower_components/angular/angular.min.js:66:270)
at g (http://localhost/loopin/bower_components/angular/angular.min.js:58:136)
at g (http://localhost/loopin/bower_components/angular/angular.min.js:58:153)
at g (http://localhost/loopin/bower_components/angular/angular.min.js:58:153)
at g (http://localhost/loopin/bower_components/angular/angular.min.js:58:153)
at g (http://localhost/loopin/bower_components/angular/angular.min.js:58:153)

When button is outside the form everything works fine.

I use ui-bootstrap's uibModal. I put the angular-ladda in script of 'text/ng-template'. And then it don't work

<html>
<body>
<form method="post" action="index.php" novalidate>
<input required data-parsley-length="[11,11]" data-parsley-type="number" type="text" id="cacel" name="cacel" class="form-control" placeholder="please cacel entery" value="">
<button type="submit" class="ladda-button btn btn-sm btn-blue" data-style="zoom-in"><i class="mdi mdi-content-save"></i> Save</button>
</form>
<script src="jquery.js"></script>
<script src="parsley.min.js"></script>
</body>
</html>

parsley chopping does not occur.
But he's still running on the ladda.
ladda should not work.

Hi I noticed angular-ladda is referencing a pretty old version of angular-bootstrap, which is anyway not referencing the official bower repository (https://github.com/angular-ui/bootstrap-bower)

Instead of using the dependency "angular-bootstrap" it should be using angular-ui-bootstrap-bower"

Cheers

Hey,
very good and easy understandable implementation of the ladda functionalities for angular.

For me (and certainly also for others) it would be great if i could set the spinner color globally in the laddaProvider on module config instead of in every html element. As i saw it, 'style' is the only option available right now, isn't it?

i would like to write my code like:

       laddaProvider.setOption({
            style: 'zoom-out',
            spinnerColor: '#FFB800'
        });

Is this or other option planed to be implemented?

Could you please publish this to npm?

Note this line where you assign root.Ladda to factory(root.Ladda). But the factory doesn't return the Ladda object, so you're overriding the Ladda global. Doesn't mess me up, because I'm using CommonJS, but I imagine it would throw a bunch of other developers for a loop...

Instead, your factory should return the name of the module (like the angular core modules do). For more info, see this post.

Hi,

I have a page that needs to handle several ladda buttons, so what am currently doing is something like the following:

<div ng-repeat="row in $rows">
  <button ladda="loader{{ row.id}}">Action</button>
</div>

Back in 0.1.9, it worked fine. But after updating to the latest version, and trying to trace the bug, found that apparently 0.1.10's rewrite broke the directive. And now angular throws the following error:

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 18 of the expression [loader{{ row.id }}] starting at [{{ row.id }}].
http://errors.angularjs.org/1.3.9/$parse/syntax?p0=%7B&p1=is%20an%20unexpec…
    at REGEX_STRING_REGEXP (angular.js?body=1:64)
    at Parser.throwError (angular.js?body=1:11999)
    at Parser.parse (angular.js?body=1:11952)
    at $parse (angular.js?body=1:12661)
    at Scope.$get.Scope.$watch (angular.js?body=1:13816)
    at angular-ladda.js?body=1:43
    at angular.js?body=1:16207
    at completeOutstandingRequest (angular.js?body=1:4903)
    at angular.js?body=1:5283angular.js?body=1:11595 (anonymous function)angular.js?body=1:8545 $getangular.js?body=1:16210 (anonymous function)angular.js?body=1:4903 completeOutstandingRequestangular.js?body=1:5283 (anonymous function)

Not sure if I should follow another approach to control several "dynamic" ladda buttons in the same page. So will downgrade to 0.1.9 in the meanwhile.

angular-ladda doesn't work properly with browserify, since it references the Spinner and Ladda libraries, which are not proper AMD modules (and are also not always used as such in angular-ladda's code).

I have managed to make it work (so I figured I should write it here in case it might help someone else):

• npm install --save browserify-shim
• in your package.json, add the following object:

"dependencies": {
    ...
},
"browserify-shim": {

    "ladda": "global:Ladda",

    "spin.js": "global:Spinner"

}

• require Spinner, Ladda and angular-ladda wherever you usually require external modules (the ordering here is important):

window.Spinner = require('/components/ladda/js/spin');
window.Ladda = require('/components/ladda/js/ladda');
require('/components/angular-ladda/dist/angular-ladda');

• Simply inject 'angular-ladda' in the relevant module, and that should do it.

angular.module('moduleName', [
    'angular-ladda'
])

After running bower install angular-ladda --save I get the ladda folders, but I'm not getting the dist folder along with the install. It appears that ladda no longer supports bower, so the ladda dependencies for angular-ladda needs to get set to a 1.X version.

could you tell me why?

I get TypeError: t is not a function when i just try to create an Ladda Button somewhere.

Button

Using angular-ladda with requirejs leads to an issue:

ReferenceError: Ladda is not defined

...since Ladda is no longer defined on the global scope. Any way to resolve this? Thanks!

Previous time ，style is normal，but click more times，the style has problem。

I have a button that looks like the below. When I remove the ng-disabled everything works fine, otherwise the spinner never appears.

<button
  ladda="vm.runningReport"
  data-style="zoom-in"
  class="btn btn-default"
  uib-tooltip="Run Report"
  tooltip-placement="top"
  ng-disabled="vm.parameters.length > 0 && !vm.parametersSupplied(vm.parameters.values)"
  ng-click="vm.run(query)">
  <i class="glyphicon glyphicon-play text-primary"></i>
</button>

Using Bootstrap 3.2.0 makes it break.

The spinner is not shown.

Downgrading to 3.1.1 does make the ladda work again.

duplicate compile when priority is low

Hi, I use angular-ladda with boostrap btn class, then I clicked on button function is find but style is not appear like example, see on image below

#9 (comment)

ladda 1.0.0 has released

Hi
I downloaded your library, but when i want to use the minified version i always receive a "Syntax Error" in my console (Internet explorer 11).

Also, the minified version requires 64KB and the normal version 4KB. Why? :)

Hello,
this is not working when you set your directive on modal footer buttons when using Bootstrap UI's modal component.

I think it is because the modal is destroyed then recreated again.

Here is a demo : https://jsfiddle.net/prbaron/ru1p5y38/
attended : When you click on the OK button, it should show a loader.
result : there is no loader.

Please, update dist/angular-ladda.js & dist/angular-ladda.min.js from last source code.

Thanks.

Hello~@subicura,
I am the member of cdnjs project.
We want to host this library.
Is it the homepage? https://remotty.github.io/angular-ladda/
or it is just a demo page?
thanks!