johannesjo / angular-promise-buttons Goto Github PK

Hi,
As I'm already using font awesome for icons (and I think the majority are as well), I'm think to make use of the already built css style for my promise-buttons. I tried to configure the template as the following:

.config(function (angularPromiseButtonsProvider)
        {
            angularPromiseButtonsProvider.extendConfig({
                spinnerTpl: '<i class="fa fa-spinner fa-pulse"></i>'
            });
        });

The issue is that the icon keeps displayed and spin initially.
I expect the template is going to be shown only when the promise is fired/starts (but not initially and before the promise is run).
Dose it make sense? Is something missing?

Hi,

When submitting a form with required empty fields, the loading class is added to the button and not removed.

Here is my implementation :

<form ng-submit="submitLogin()" promise-btn name="loginForm">
                            <md-input-container >
                                <label>Email</label>
                                <input ng-model="email" required md-no-asterisk>
                            </md-input-container>
                            <md-input-container>
                                <label>Password</label>
                                <input ng-model="password" type="password" required md-no-asterisk>
                            </md-input-container>
                            <md-button type="submit">
                                Login
                            </md-button>
                        </form>

and my controller

$scope.submitLogin = function () {
            console.debug("login submitted", $scope.loginForm)
            if($scope.loginForm.$valid)
            {
                return $auth.login($scope.account).then(function (response) { },function(error){ });
            }
        };

and my config

 var config = {
      spinnerTpl: '<div class="btn-spinner " md-colors="{background: \'primary\'}"><md-progress-circular md-mode="indeterminate" class="md-warn md-hue-3 center" md-diameter="40px"></md-progress-circular></div>',
      priority: 0,
      disableBtn: true,
      btnLoadingClass: 'is-loading',
      addClassToCurrentBtnOnly: true,
      disableCurrentBtnOnly: false,
      minDuration: 700,
      CLICK_EVENT: 'click',
      CLICK_ATTR: 'ngClick',
      SUBMIT_EVENT: 'submit',
      SUBMIT_ATTR: 'ngSubmit'
    };

The submitLogin function is only called when the form is valid and I don't want to disable it when the form is invalid.

I am happy to investigate this a bit more and create a PR but I need some guidance on where to look to make the code looking for the $valid property of the form.

Thanks
Clem

Hello,

During the promise resolution, if ng-disabled value changes to false, then once the promise is resolved, the disabled attribute is always removed (not taking into account the state of ng-disabled).

We made a small fix on our local version:

1. We added ngDisabled in the directive's scope
2. We modified handleLoadingFinished to take into account ngDisabled value

So here it is:

function handleLoadingFinished(btnEl) {
    if ((!cfg.minDuration || minDurationTimeoutDone) && promiseDone) {
        if (cfg.btnLoadingClass) {
            btnEl.removeClass(cfg.btnLoadingClass);
        }
        if (cfg.disableBtn && !scope.ngDisabled) {
            btnEl.removeAttr('disabled');
        }
    }
}

AND

return {
    restrict: 'EA',
    priority: angularPromiseButtons.config.priority,
    scope: {
        promiseBtn: '=',
        promiseBtnOptions: '=?',
        ngDisabled: '='
    },
    ...

Could you include this as a feature in you next version of the directive ?
Thank you.

I hope this directive can set the loading text .

The spinner does not show up in case of a promise but the button is disabled. On further inspection, I found out that the spinner template doesn't get added at all.

Can we have a way of changing how the button looks when it completes with either an error or a success?

I made a directive that works based on booleans, but I'm getting sick of it as well. It's not the best, but it functions OK. Source here for reference: loading-button.ts.txt

This is the behavior described:
On Success
On Error

After about 2 seconds (or another specified time) it will revert back to normal.

It would also be cool to be able to specify a parameterless function to call OnError or OnSuccess based on a definition from the config, so anything is truly possible.

Also, I don't know how reasonable this is, but having a way to fail out if too much time has elapsed would also be wonderful.

I could probably write most of this code for you, so that is an option as well.

Being ngClick the default CLICK_ATTR but being able to use another directive instead.

I have a custom directive for clicking and doing this really helps.

Hello, i'm a user of angular-promise-buttons and i just love it. Now i'm using Angular 2 and i wonder if you plan to upgrade your component to work with it?

Thanks for your great job!

I have a form like this

<form ng-submit="yourServiceCaller()"
      promise-btn>
  <button type="submit" ng-if="maybe">MyBtn</button>
</form>

By debugging, I found that getSubmitBtnChildren does not find buttons with the ng-if directive.

A workaround is to use ng-show instead. Is there any way to wait until all those ng-if are already resolved?

I am using this module with angular 1.6.3 and inside my form but the spinner have been located outside of the submit button and spins forever.

I'm trying to implement your component but I'm not getting the spinner to show during progress. The disabling of the button works fine. Any ideas on what I;m missing or what I should look for?

Looking at the code, couldn't find any good reason for this. can't use $event.stopPropagation() because of this.

Hi,
I have a custom directive to validate form before submit (validSubmit instead of ngSubmit), it's possible to customize SUBMIT_ATTR to include arbitrary attribute name?

Thank's so much.

I'm currently using ES6 with my Angular 1.5.X code. The promise button library is failing to resolve the promises because of this code block.

mVal.finally(function() {
    promiseDone = true;
    handleLoadingFinished(btnEl);
});

mVal.finally is not a function with native ES6 promises. I noticed in your angular 2 version, you check for finally and then have a fallback.

if (promise.finally) {
    promise.finally(resolveLoadingState);
} else {
    promise
        .then(resolveLoadingState)
        .catch(resolveLoadingState);
}

Is it possible to have this approach included into this repo as well.

Hi,

I have an input element for searching data and the promise is fired with ng-change like this:
<input type="text" ng-model="searchItemsInput" ng-change="searchItems(searchItemsInput)" promise-btn>

Is there away that I can make it works with an (input with ng-change)?
Thanks in advance.

Hi there! I'm having an issue with your plugin.
I'm using nested ng-click like this:

<div ng-repeat="item in $ctrl.notifications">
  <div ng-click="$ctrl.openNotification(item)">
    <button type="button" ng-click="$ctrl.markAsRead(item)" promise-btn>Mark as read</button>
  </div> 
</div>

As you can see, I have a list of notifications. You can open a notification by clicking on a div. And you can mark it as read by clicking on a button inside div.

But I don't want to open notification when I mark it as read, so I do $event.stopPropagation() to prevent the event from bubbling up the DOM tree. But I can't do this because promise-btn directive overrides original $event and instead of MouseEvent I get a string "click".

I hope you can help me.

Hi,

I'm seeing the following when using the library. Angular 1.6.3 app.

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.6.3/jqLite/nosel
at angular.js:66
at JQLite (angular.js:3188)
at compile (angular.js:8849)
at appendSpinnerTpl (angular-promise-buttons.js:116)
at Object.link (angular-promise-buttons.js:206)
at angular.js:1341
at angular.js:10413
at invokeLinkFn (angular.js:10419)
at nodeLinkFn (angular.js:9808)
at compositeLinkFn (angular.js:9048) ""

Any ideas why this would happen?

I found that you have package.json but it looks like your package wasn't published to npm.

As an npm user I want to install angular-promise-buttons package with

npm install angular-promise-buttons --save

Here you can get more information about the publishing process:
https://docs.npmjs.com/getting-started/publishing-npm-packages

Also this screencasts might be useful https://egghead.io/series/how-to-write-an-open-source-javascript-library (check videos about npm)

Hello,

I've been using this library to disable my form submit buttons to avoid duplicated requests and it was working fine, until I realized it was unbinding other submit event handlers.

I see that it is using scope.$evalAsync to wait for ng-submit to properly attach it's handlers, but it could do that by using directive priority. That way I can create my custom directives that attach submit event handlers with less priority, so they won't be unbinded.

Hello,

Hello, i have migrated my app from Angular 4 to 5. I am getting this error:

user-cfg.js:4 Uncaught TypeError: core_1.OpaqueToken is not a constructor
at eval (user-cfg.js:4)
at Object.../../../../angular2-promise-buttons/dist/user-cfg.js (vendor.bundle.js:703)
at webpack_require (inline.bundle.js:55)
at eval (promise-btn.directive.js:7)
at Object.../../../../angular2-promise-buttons/dist/promise-btn.directive.js (vendor.bundle.js:695)
at webpack_require (inline.bundle.js:55)
at eval (index.js:3)
at Object.../../../../angular2-promise-buttons/dist/index.js (vendor.bundle.js:687)
at webpack_require (inline.bundle.js:55)
at eval (app.module.ts:15)

It'd be nice to be able to return the promise in the function call in ng-click, and not have to muck up the scope with promises that only get used once and overwritten next time the button is pressed.

kirstein/angular-autodisable does it this way, and I feel like it's a nice way to keep the code functional and clean.

Being able to use a scope variable promise is nice, and allows this library to be more flexible, but I think adding this would help to make it even more robust. Thoughts?

Example:

  angularPromiseButtonsProvider.extendConfig({
    minDisplayTime: 1000
  });

I am trying to add two directives to a button, one is promise-btn, then other is angular-confirm, which pops open a bootstrap dialog asking if they are sure they want to delete something.

I'm getting the following error...

Multiple directives [confirm, promiseBtn] asking for new/isolated scope on: <button class="btn btn-danger" ng-click="Undo(item)" ng-if="item.Result == 'UnTested'" promise-btn="" confirm="Are you sure?"

Any ideas on how to get both working?

Hi, I noticed that https://www.npmjs.com/package/angular-promise-buttons is still at 1.1.11 for the latest version but bower is at 1.1.13. Would it be possible for you to do a release to npm as well? Thanks!

Hi. Thanks for your plugin. It's really great! I found a bug.

Demo: http://plnkr.co/edit/ImxzzVoS29QYD46OtMQ7?p=preview
Hover over the button to see the tooltip
Hover out to see that the tooltip disappears

Then hover over the button again and click on it. You will see the angular-promise-buttons spinner. But when you hover out the tooltip won't disappear.

One should able to configure separately for individual button

If i use it in ng-repeat, all buttons in ng-repeat, shows busy indicator

Thank you for your great work. Its awesome. Maybe this not a issue but I am stuck at stopping the animation. I am set the delay like 20 second long. Form submit trigger the animation but how can i stop the animation on success. Here is my code:

$scope.submitFunc = function() {
$scope.submitPromise = fakeFac.success();
$http({
method  : 'POST',
url    
data   
headers 
   })
.success(function(formData) {
          $scope.submitPromise = false;
})
}