{"id":17458112,"url":"https://github.com/pocesar/angular-event-delegate","last_synced_at":"2025-03-21T03:33:35.103Z","repository":{"id":20027113,"uuid":"23295077","full_name":"pocesar/angular-event-delegate","owner":"pocesar","description":"Use a common parent to delegate events to underlaying DOM elements using jQuery","archived":false,"fork":false,"pushed_at":"2016-10-22T22:04:10.000Z","size":7,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-18T06:28:02.769Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/pocesar.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":"2014-08-24T22:45:27.000Z","updated_at":"2016-10-22T22:03:35.000Z","dependencies_parsed_at":"2022-07-23T14:32:21.064Z","dependency_job_id":null,"html_url":"https://github.com/pocesar/angular-event-delegate","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocesar%2Fangular-event-delegate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocesar%2Fangular-event-delegate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocesar%2Fangular-event-delegate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocesar%2Fangular-event-delegate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pocesar","download_url":"https://codeload.github.com/pocesar/angular-event-delegate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221811374,"owners_count":16884305,"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-10-18T03:54:37.773Z","updated_at":"2024-10-28T09:17:20.176Z","avatar_url":"https://github.com/pocesar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"angular-event-delegate\n======================\n\nUse a common parent to delegate events to underlaying DOM elements using jQuery. \n\n[DEMO](http://plnkr.co/edit/wTjaeI9RAoPwy4Nkycwk?p=preview)\n\nUsage\n=================\n\n```js\nangular\n.module('App', ['EventDelegate'])\n.controller('MainCtrl', function(){\n\n  this.items = [\n    {name: 'name', value: 'value', showy: false},\n    {name: 'two' , value: '2', showy: false}\n  ];\n  \n  this.clicky = function(value){\n    alert(value);\n  };\n});\n```\n\n```html\n\u003cdiv ng-controller=\"MainCtrl as main\"\u003e\n\n  \u003cdiv event-delegate=\"{'click': '.showcase', 'mouseenter': '.infotext'}\"\u003e\n\n    \u003cdiv ng-repeat=\"item in main.items\"\u003e\n\n      \u003ca class=\"showcase\" event-delegate-target=\"main.clicky(item.value)\"\u003eClick: [ {{ item.name }} ]\u003c/a\u003e\n      \u003cdiv class=\"infotext\" event-delegate-target=\"item.showy=!item.showy\"\u003e\n        Toggle on mouseenter\n        \u003cspan ng-show=\"item.showy\"\u003eShowing\u003c/span\u003e\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n\n  \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n## How is it better than ng-click?\n\nYou can define, at once, many events besides click event, on the parent that will be delegated to the elements inside it. \n\nAny new elements added to the parent will have the event bound without the need to binding a new event to it. Also useful with a big list of elements, having 100+ event listeners attached to each item, plus scope.$watch'es, starts to feel heavy. This is mainly useful in `ng-repeat` loops though. \n\nYou can define multiple selectors as well using for example `'click': '.showcase,.infotext'`\n\n## Requirements\n\nThis depends on jQuery\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocesar%2Fangular-event-delegate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpocesar%2Fangular-event-delegate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocesar%2Fangular-event-delegate/lists"}