0

As it is known AngularJS doesn't support synchronous requests. Most of what it allows for that are promises, but the question is not about that. I came across a problem, that getting response might take longer than person expects and the person might resubmit data. I would like to prevent it.

Are there any common built-in ways to do that?

2
  • yes - disable the button that triggers the request - make sure you show a 'working' icon / gif so the user knows the computer is thinking AND make sure nothing takes long enough that the user would want to re-submit in the first place! Commented Apr 24, 2014 at 12:23
  • You just named common steps for that. What I'm asking is wether AngularJS have something buil-in for that scenario. Commented Apr 24, 2014 at 12:24

1 Answer 1

1

You can use ng-disabled bound to a property on the controller that you set to true before the xhr and false after the xhr completes. Click event and therefore ng-click will not file while a button is disabled.

Documentation : https://docs.angularjs.org/api/ng/directive/ngDisabled

Update If you want to use ng-disabled with any element (e.g. a) you can use a custom click handler e.g.:

yourApp.directives.directive('myClick', ['$parse',function ($parse): ng.IDirective {
    return {
        restrict: 'A',        
        link: (scope, element:JQuery, attrs) => {
            var fn = $parse(attrs.picClick);
            element.on('click', function (event) {

                // The core disabled logic detection
                if (attrs.disabled) return;

                scope.$apply(function () {
                    fn(scope, { $event: event });
                });
            });
        }
    }
}]);

Of course, you should style your element differently for when it has the attribute disabled set to true.

Another way Alternatively you can use a pair multually exclusive elements, only one shown at a time using something as simple as an (ng-show)

Sign up to request clarification or add additional context in comments.

3 Comments

Would it work on a <a href="#" ng-click="doSomething()">...</a> as well? Since I'm seeing, that the allowed element for that is INPUT element.
I assume, that under "Another way" you mean two either buttons or anchors, that are show under diff. circumstances.
@Eugene yes. that is what i meant

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.