{"id":15295250,"url":"https://github.com/linagora/dynamic-directive","last_synced_at":"2025-10-22T21:20:46.124Z","repository":{"id":58234392,"uuid":"42297576","full_name":"linagora/dynamic-directive","owner":"linagora","description":"[ARCHIVED] AngularJS Dynamic Directives","archived":true,"fork":false,"pushed_at":"2021-03-29T10:00:14.000Z","size":56,"stargazers_count":11,"open_issues_count":0,"forks_count":5,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-04-26T01:06:20.914Z","etag":null,"topics":["angular","angularjs","injection","modularity"],"latest_commit_sha":null,"homepage":"","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/linagora.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":"2015-09-11T08:43:35.000Z","updated_at":"2023-01-28T09:52:26.000Z","dependencies_parsed_at":"2022-08-31T09:21:07.028Z","dependency_job_id":null,"html_url":"https://github.com/linagora/dynamic-directive","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linagora%2Fdynamic-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linagora%2Fdynamic-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linagora%2Fdynamic-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linagora%2Fdynamic-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linagora","download_url":"https://codeload.github.com/linagora/dynamic-directive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877361,"owners_count":16554882,"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":["angular","angularjs","injection","modularity"],"created_at":"2024-09-30T17:09:14.325Z","updated_at":"2025-10-07T06:31:38.299Z","avatar_url":"https://github.com/linagora.png","language":"JavaScript","readme":"![Archived](https://img.shields.io/badge/Current_Status-archived-blue?style=flat)\n\n# angular dynamic-directive\n\n\u003e inject directives dynamically to pre-defined anchor points\n\n## Getting started\n\nThis module has been tested on angular `1.3.x`.\n\nTo use this module in your application, you have to:\n\n* include the code in your main HTML file, after the angular.js inclusion\n\n```xml\n\u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.18/angular.js'\u003e\u003c/script\u003e\n\u003cscript src='dynamic-directive/dist/dynamic-directive.min.js'\u003e\u003c/script\u003e\n```\n\n* set `op.dynamicDirective` as a dependency of your angular module:\n\n```javascript\nangular.module('your-app', ['op.dynamicDirective'])...\n```\n\nnow let the fun begin !\n\n```javascript\nangular.module('your-app', ['op.dynamicDirective'])\n.directive('dir1', function() {\n  return {\n    restrict: 'E',\n    template: '\u003cdiv\u003eItem X\u003c/div\u003e'\n  };\n})\n.directive('dir2', function() {\n  return {\n    restrict: 'E',\n    template: '\u003cdiv\u003eItem Y\u003c/div\u003e'\n  };\n})\n.directive('addButton', ['dynamicDirectiveService', function(dynamicDirectiveService) {\n  return {\n    restrict: 'A',\n    link: funtion(scope) {\n      var dir2 = new dynamicDirectiveService.DynamicDirective(\n        function(scope) {return true;},\n        'dir2'\n      );\n      scope.add = function() {\n        dynamicDirectiveService.addInjection('anchorPoint1', dir2);\n      };\n    }\n  };\n});\n;\n```\n\nAnd the the HTML\n\n```xml\n\u003cbody ng-app='your-app'\u003e\n  \u003cdiv class='items' dynamic-directive='anchorPoint1'\u003e\n    \u003cdir1\u003e\u003c/dir1\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cbutton add-button ng-click='add()'\u003eDynamically add the dir2 directive\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n\n## Goals\n\nThe objective of this library is to bring modularity to an Angular application. Let's say you are developing some complex Rich Internet Application, and you want lots of modularity, because that's best practice. Now, your application got a user menu. You want third party modules to be able to add entries to that menu. You use the `dynamic-directive` directive, and give it an anchor name :\n\n```xml\n\u003cdiv dynamic-directive='userMenu'\u003e\n  \u003cdiv\u003eProfile\u003c/div\u003e\n\u003c/div\u003e\n```\n\nNow, a third party module can inject entries to your user menu, by creating an Angular directive (let's say: 'avatar'), create a DynamicDirective out of it and then inject it using the dynamicDirectiveService.\n\n```javascript\n// third party directive\n.directive('avatar', function() {\n  return {\n    restrict: 'E',\n    template: '\u003cdiv\u003eavatar\u003c/div\u003e',\n    replace: true\n  };\n})\n\n// directive injection can happen during the config phase,\n// using the dynamicDirectiveService provider\n.config(['dynamicDirectiveService', function(dynamicDirectiveService) {\n  // here \"avatar\" is the name of the angular directive\n  var dd = new dynamicDirectiveService.DynamicDirective(function() {return true;}, 'avatar');\n  // here userMenu is the anchor name you gave as the dynamic-directive attribute value\n  dynamicDirectiveService.addInjection('userMenu', dd);\n}])\n\n// directive injection can also happen during the run phase,\n// so anywhere in your code, using the dynamicDirectiveService service\n.run(['dynamicDirectiveService', function(dynamicDirectiveService) {\n  var dd = new dynamicDirectiveService.DynamicDirective(function() {return true;}, 'avatar');\n  dynamicDirectiveService.addInjection('userMenu', dd);\n}])\n```\n## API\n\n### DynamicDirective class\n\n    new DynamicDirective(filterFunction, angularDirectiveName, [options]);\n\n**filterFunction**\n\nRequired. This function receives the scope as an argument. Example:\n\n```javascript\nfunction(scope) {\n  if (scope.isAdmin) {\n    return true;\n  } else {\n    return false;\n  }\n}\n```\n\nThe DynamicDirective contructor allows the boolean true as a shortcut for the filter function ```function() {return true;}```.\n\nThe class is exposed as an angular service as well. You can inject it to your needs. Example:\n\n```javascript\n.factory('myService', ['DynamicDirective', function(DynamicDirective) {\n  var mydirective = new DynamicDirective(true, 'testing');\n}])\n```\n\n**angularDirectiveName**\n\nRequired. Will be used as the tagName to create the HTML tag of your directive. Example:\n\n```javascript\n\"avatar\"\n```\n\n**options**\n\nOptional, it is an object like:\n\n```javascript\n{\n  attributes: [\n    {\n      name: 'addressbook',\n      value: 'ab'\n    },\n    {\n      name: 'contact',\n      value: 'currentContact'\n    }\n  ],\n  scope: {\n    add: function(something) {}\n  },\n  priority: 10\n}\n```\n\nNow let's detail available options.\n\n**attributes - **\nThose attributes will be added to the HTML element of your injected directive.\nThis is really useful when using isolate scopes.\nExample:\n\n```javascript\n[\n  {\n    name: 'addressbook',\n    value: 'ab'\n  },\n  {\n    name: 'contact',\n    value: 'currentContact'\n  }\n]\n```\n\n**scope - **\nThe directive will be compiled against this object (scope).\nExample:\n\n```javascript\n{\n  addressbook: 'ab'\n  contact: 'currentContact'\n}\n```\n\n**priority - **\nIn case you inject several directives in the same anchor, you can control the order of those directives in the DOM.\nDefault priority is 0. The highest priority will be put first in the DOM flow. Example:\n\n```javascript\n10\n```\n\n### dynamicDirectiveService service\n\n**DynamicDirective**\n\n```javascript\ndynamicDirectiveService.DynamicDirective\n```\n\nGive access to the DynamicDirective object.\n\n**addInjection(name, directive)**\n\n    dynamicDirectiveService.addInjection(name, directive)\n\nAdd the injection of \"directive\" on anchor points named \"name\". Example:\n\n```javascript\nvar dd = new dynamicDirectiveService.DynamicDirective(function() { return true;}, 'directivename');\ndynamicDirectiveService.addInjection('anchorPointName', dd);\n```\n\n**getInjections(anchorName, scope)**\n\nGet the injection of anchor point \"anchorName\" with scope context \"scope\". This method is used by the dynamic-directive directive. Example:\n\n```javascript\nvar directivesToInject = dynamicDirectiveService.getInjection('anchorPointName', {});\n```\n\n**resetInjections(anchorName)**\n\nReset all injections of anchor point \"anchorName\". Example:\n\n```javascript\ndynamicDirectiveService.resetInjections('anchorPointName');\n```\n\n### dynamicDirectiveService provider\n\nAllows third party modules to register the directives injection on angular configuration time.\n\n**DynamicDirective**\n\n    dynamicDirectiveService.DynamicDirective\n\nGive access to the DynamicDirective object.\n\n**addInjection(name, directive)**\n\n```javascript\nangular.config(function(dynamicDirectiveService) {\n  var dd = new dynamicDirectiveService.DynamicDirective(function() { return true:}, 'thename');\n  dynamicDirectiveService.addInjection(name, directive);\n});\n```\n\n## Developers ?\n\n```bash\nnpm install\n```\n\nto install the development envronment. During development, use :\n\n```bash\ngrunt watch\n```\n\nto have the linters, transpilers and tests, launched automatically on file change. Clone, patch, pull request, give love.\n\n### Release\n\n```bash\ngrunt release\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinagora%2Fdynamic-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinagora%2Fdynamic-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinagora%2Fdynamic-directive/lists"}