How to create a directive to be used in any module?

Question

How can I create a directive without linking it to a specific module which can be used in any module, such as the build-in directives.

Kythera

you should create a new module and inject that module into your main module and use the directive – Rothko

While you're at it, give the directive an isolate scope, so it can be used anywhere without the worry of scope pollution. – Plenteous

Answer 1

A directive or service has to belong to a module. What you can do is create separate modules for your directives and then inject them into your main application module. Here's my set up:

window.app = angular.module('app', ['ngRoute', 'app.system', 'app.animations', 'app.cart']);


angular.module('app.system', []);
angular.module('app.animations', []);
angular.module('app.cart', []);

Now your Service can be in its own module and called from within the app module. This is essentially what Ajay said.

angular.module('app.cart').factory("Cart", ['$resource', function($resource) {}]);

Eanes

Answer 2

Short answer: no, it is not possible. All directives must be part of a module.

The Angular docs say

Much like controllers, directives are registered on modules. To register a directive, you use the module.directive API. module.directive

There isn't a way to define a directive outside of a module.

The Angular built-in directives themseves are defined on a module called ng - see the source code.

This module is created using the Angular internal method setUpModuleLoader (see AngularPublic.js and loader.js).

This function is not part of the Angular public API, so you can't access it yourself. You need to define your directives in your own module. Any app module which depends on this module will be able to use your directives.

It's a very Angular way of looking at things - avoid public objects, but make things injectable wherever possible.

Fibula

Answer 3

I think I understand what the OP means. Similar to libraries like Angular UI for Bootstrap. The OP would like to create directives, etc. that can be used in other apps without having to know the main app name.

You can do this like so:

angular.module("hello.world", [])
  .directive('hello', function() {
    return {
      template: '<p>Hello, world!</p>',
      restrict: 'E',
      link: function (scope, element, attrs) {}
    };
  });

Saved as 'hello-world.js' for example.

Make sure you include that JS in your page. Then inside your main Angular app:

var app = angular.module("myApp", ['hello.world']);

Then anywhere in your HTML under the app scope, you can insert:

<hello></hello>

And that directive will take over rendering a paragraph tag with the words "Hello, world!" within.

My understanding is that you can do this with all Angular objects - services, factories, providers, etc.

Marindamarinduque

Answer 4

If I m not mistaken even the built-in directives belong to a module (ng module). It just that you don't have to explicitly declare a dependency on it as it is done by the framework for you. That's why you will always have to declare a module, add directive(s) to this module and depend of this module in other modules. Something like that :

// Reusable module with directive(s)
angular.module('directives', [])
  .directive('rating', function () {
    ...
  } 

// other module that rely on teh first one
angular.module('MyApp', [
  'directives',
  ...
]);

//Module 2
angular.module('MyModuleWithDependency', [
  'directives'
]);

Delate