{"id":13777931,"url":"https://github.com/kirstein/angular-autodisable","last_synced_at":"2025-05-11T11:34:35.450Z","repository":{"id":11625550,"uuid":"14125046","full_name":"kirstein/angular-autodisable","owner":"kirstein","description":"ngAutodisable directive for angular. Automatic disable for buttons rocks!","archived":true,"fork":false,"pushed_at":"2016-11-21T17:14:40.000Z","size":52,"stargazers_count":63,"open_issues_count":8,"forks_count":26,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-07T12:49:03.616Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jsfiddle.net/kirstein/wXnks/embedded/result/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kirstein.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-04T22:07:56.000Z","updated_at":"2023-05-03T08:47:13.000Z","dependencies_parsed_at":"2022-09-01T21:01:00.790Z","dependency_job_id":null,"html_url":"https://github.com/kirstein/angular-autodisable","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirstein%2Fangular-autodisable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirstein%2Fangular-autodisable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirstein%2Fangular-autodisable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirstein%2Fangular-autodisable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kirstein","download_url":"https://codeload.github.com/kirstein/angular-autodisable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224873301,"owners_count":17384078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T18:00:49.858Z","updated_at":"2024-11-17T13:31:16.624Z","avatar_url":"https://github.com/kirstein.png","language":"JavaScript","funding_links":[],"categories":["Directive"],"sub_categories":[],"readme":"# angular-autodisable [![Build Status](https://travis-ci.org/kirstein/angular-autodisable.png)](https://travis-ci.org/kirstein/angular-autodisable)\n\nAn extension to angular `ng-click` directive that automatically sets the element to disabled if the handler would return a promise.\n\n### Requirements\n---\n\n1. angular.js version \u003e1.2+\n2. following es5 functions:  \n    1. [`bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)\n    2. [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)\n    3. [`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)\n    4. [`indexOf`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)\n\n\n### Usage\n---\n\nInclude `ngAutodisable` as dependency  \n\n```\n  angular.module('MyApp', [ 'ngAutodisable', ... ]);\n``` \n\nIf that's done then just follow those simple steps:  \n\n1. just attach `ng-autodisable` directive to the element which happens to have `ng-click` directive OR a form that has the `ng-submit` directive.\n2. ???\n3. profit!\n\n#### On an element\n\n```\n  \u003cbutton ng-click=\"doSomething()\" ng-autodisable\u003eDo something\u003c/button\u003e\n  \n  \u003ca ng-click=\"doSomething()\" ng-autodisable\u003eDo something\u003c/a\u003e\n```\n\n#### On a form\n\n```\n  \u003cform ng-submit=\"doSomething()\" ng-autodisable\u003e \n    ...\n    \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e \n  \u003c/form\u003e\n```\nThe button with type `submit` within the form will be disabled.\n\n#### Loading class\n\nYou can *optionally* add a list of classes which will be added to the element while this is disabled. This is useful to add a spinner or something similar.\n\n```\n  \u003cbutton ng-click=\"doSomething()\" \n          ng-autodisable-class=\"class1 class2\" \n          ng-autodisable\u003e\n    Do something\n  \u003c/button\u003e\n  \n  \u003cform ng-submit=\"doSomething()\" \n        ng-autodisable-class=\"class1 class2\"\n        ng-autodisable\u003e \n    ...\n    \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e \n  \u003c/form\u003e\n```\nThe button with type `submit` within the form will get the class.\n\n### Demo\n---\n\nA quick demo is available at [jsfiddle](http://jsfiddle.net/kirstein/wXnks/embedded/result/)\n\n### How it works\n---\n\nWhen `ngClick` and `ngAutodisable` are on the same element then `ngAutodisable` overwrites the handler for `click` event. The default `ngClick` action is recreated _(and passes all the angular specs)_.  \n\nIf the click handlers result happens to be a `promise` _(`$http` or `$q`)_ then the element attribute `disabled` will be set as true. If the promise fulfills then the element `disabled` attribute will be removed.\n\nThis also works with multiple click handlers, given that click handlers are separated by `;` as such:  \n\n```\n  \u003cbutton ng-click=\"doSomething();doSomethingElse()\" ng-autodisable\u003eDo something\u003c/button\u003e\n```\n\nIf there are multiple click handlers then the element disabled style will be removed after the last promise resolves.\n\n### Note\n---\n\nThrows an exception `ngAutodisable requires ngClick attribute in order to work` if `ngAutodisable` is on an element without `ngClick`.\n\n### Devel\n---\n\n```\n  npm install\n  bower install\n  grunt test\n  grunt build\n```\n\n### License\n---\n\nMIT\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirstein%2Fangular-autodisable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkirstein%2Fangular-autodisable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirstein%2Fangular-autodisable/lists"}