{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular.js/issues/6950","labels_url":"https://api.github.com/repos/angular/angular.js/issues/6950/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular.js/issues/6950/comments","events_url":"https://api.github.com/repos/angular/angular.js/issues/6950/events","html_url":"https://github.com/angular/angular.js/issues/6950","id":30668395,"number":6950,"title":"Feature Request: Programmatically add directives to another directive's elements before they get compiled.","user":{"login":"trusktr","id":297678,"avatar_url":"https://avatars.githubusercontent.com/u/297678?v=3","gravatar_id":"","url":"https://api.github.com/users/trusktr","html_url":"https://github.com/trusktr","followers_url":"https://api.github.com/users/trusktr/followers","following_url":"https://api.github.com/users/trusktr/following{/other_user}","gists_url":"https://api.github.com/users/trusktr/gists{/gist_id}","starred_url":"https://api.github.com/users/trusktr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/trusktr/subscriptions","organizations_url":"https://api.github.com/users/trusktr/orgs","repos_url":"https://api.github.com/users/trusktr/repos","events_url":"https://api.github.com/users/trusktr/events{/privacy}","received_events_url":"https://api.github.com/users/trusktr/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":21,"created_at":"2014-04-02T08:35:05Z","updated_at":"2015-03-03T14:40:24Z","closed_at":"2014-04-03T14:03:40Z","body":"I ran into an issue. So far as I know, Angular doesn't have a mechanism by which to address it easily.\r\n\r\nhttp://ngmodules.org has some awesome modules. They are really easy to use, but if they don't expose any events to you, then you're out of luck if you don't want to actually modify the 3rd party module's source code.\r\n\r\nWhat if Angular had an easy way to attach directives to the element of another directive `programmatically` (before it and any sub-templates get compiled) so that one could use third party directives and not worry if they've exposed any useful features like like event handling mechanism (e.g. they don't use ngClick on any elements)?\r\n\r\nFor example, here's an example:\r\n\r\nSuppose we use someone's `awesomeDirective`.\r\n\r\n```html\r\n<div data-awesome-directive=\"awesome.data\"></div>\r\n```\r\n\r\nThis nice directive generates some type of awesome HTML widget with HTML that is defined in the 3rd party source code, perhaps a twitter feed, a profile badge, or something else awesome, but the author of the directive did not include any way to handle click events, etc!\r\n\r\nWe could step away from Angular, and use jQuery to make a click handler like\r\n\r\n```javascript\r\n$(\"#awesomeWidget\").on(\"click\", function() {/* ... */});\r\n```\r\n\r\nbut we don't want to leave the world of Angular awesomeness!\r\n\r\nPerhaps, a new addition to the `Module.directive` API can be added to Angular so one can add a directive to any other directive's elements, like so:\r\n\r\n```javascript\r\nangular.element(document).ready(function() {\r\n\r\n    // create your app with a dependency on a 3rd party module.\r\n    var myApp = angular.module(\"myApp\", [\"awesomeModuleContainingAwesomeDirective\"]);\r\n\r\n    // the 3rd party module contains an awesomeDirective.\r\n\r\n    // create a custom directive:\r\n    myApp.directive(\"customDirective\", function() {\r\n            return { // set up directive properties like normal.\r\n                restrict: \"A\",\r\n                scope: {/* ... */},\r\n                // etc...\r\n            };\r\n        });\r\n\r\n    // attach the custom directive to the elements of another directive:\r\n    myApp.directive(\"awesomeDirective\") // get the directive.\r\n        .attachDirective(\".elements\", \"customDirective\");\r\n\r\n    // the first argument to attachDirective() is a standard jQuery selector.\r\n    // internally, Angular would use jQuery's .find(\".element\")\r\n    \r\n    // add an already-existing directive  to the elements of another directive:\r\n    var awesomeDirective = myApp.directive(\"awesomeDirective\"); // gets the directive.\r\n    awesomeDirective.attachDirective(\".otherElements\", \"ngCloak\");\r\n\r\n    // use a third argument for directives that accept an attribute expression:\r\n    awesomeDirective.attachDirective(\"#oneElement\", \"ngClick\", \"count = count + 1\");\r\n\r\n    angular.bootstrap(document, [\"myApp\"]);\r\n\r\n    /*\r\n     * This would be absolutely pure awesome.\r\n     */\r\n});\r\n```\r\n\r\nThis would be a nice way to extend directives that you are using in your app... But what if you want to attach directives to only specific instances of another directive? Then:\r\n\r\n```javascript\r\n    myApp.directive(\"awesomeDirective\") // gets the directive.\r\n        .attachDirective([\".rootElements\", \".elements\"], 'ngClick', \"count = count + 1\");\r\n    // ^ still no more than 3 arguments\r\n```\r\n\r\nThe first argument in this case is an array. The first element in the array tells Angular that we wish to attach our directive to elements matching the `awesomeDirective` only if those elements are `.rootElements`. All `.rootElements` that match the `awesomeDirective` will then have the `ngClick` directive applied to sub elements of the class `elements` using jQuery's `.find('.elements')`.\r\n\r\nAngular could benefit from something like this! And it would not only be useful for event handling that 3rd party modules haven't exposed, but for augmenting 3rd party directives with all sorts of other functionality."},"comment":{"url":"https://api.github.com/repos/angular/angular.js/issues/comments/76957050","html_url":"https://github.com/angular/angular.js/issues/6950#issuecomment-76957050","issue_url":"https://api.github.com/repos/angular/angular.js/issues/6950","id":76957050,"user":{"login":"mustaphakd","id":3776242,"avatar_url":"https://avatars.githubusercontent.com/u/3776242?v=3","gravatar_id":"","url":"https://api.github.com/users/mustaphakd","html_url":"https://github.com/mustaphakd","followers_url":"https://api.github.com/users/mustaphakd/followers","following_url":"https://api.github.com/users/mustaphakd/following{/other_user}","gists_url":"https://api.github.com/users/mustaphakd/gists{/gist_id}","starred_url":"https://api.github.com/users/mustaphakd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mustaphakd/subscriptions","organizations_url":"https://api.github.com/users/mustaphakd/orgs","repos_url":"https://api.github.com/users/mustaphakd/repos","events_url":"https://api.github.com/users/mustaphakd/events{/privacy}","received_events_url":"https://api.github.com/users/mustaphakd/received_events","type":"User","site_admin":false},"created_at":"2015-03-03T14:40:24Z","updated_at":"2015-03-03T14:40:24Z","body":"@gkalpak: no, it was not  a question.  it is just another current issue we find ourselves confronted with: loading and appending new directive to element being tied to an existing directive; loading and appending new controller to an existing element (not so much of an issue since there are easy work around thanks to the api) but clearing the component from memory once done using it demands great care unless we instantiate the component on a property that is globally accessible.  angularJs seems to do a great job clearing views from memory but not their controllers.  So a request here would, loading and removing components from memory (including their js scripting logic)."}}