Создайте директиву angular, которая будет использоваться в любом модуле

Ответ 1

Директива или служба должны принадлежать модулю. Вы можете создавать отдельные модули для своих директив, а затем вводить их в основной модуль приложения. Здесь моя настройка:

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


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

Теперь ваша Служба может быть в своем собственном модуле и вызвана из модуля приложения. Это, по сути, сказал Аджай.

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

Ответ 2

Короткий ответ: нет, это невозможно. Все директивы должны быть частью модуля.

Angular docs говорят

Как и контроллеры, директивы регистрируются на модулях. Чтобы зарегистрировать директиву, вы используете API-интерфейс module.directive. module.directive

Не существует способа определить директиву вне модуля.

Встроенные директивы Angular themseves определены в модуле с именем ng - см. исходный код.

Этот модуль создается с использованием внутреннего метода Angular setUpModuleLoader (см. AngularPublic.js и loader.js).

Эта функция не является частью общедоступного API Angular, поэтому вы не можете получить к ней доступ самостоятельно. Вы должны определить свои директивы в своем собственном модуле. Любой модуль приложения, который зависит от этого модуля, сможет использовать ваши директивы.

Это очень Angular способ взглянуть на вещи - избегать общественных объектов, но при необходимости делать инъекции там, где это возможно.

Ответ 3

Думаю, я понимаю, что означает OP. Подобно библиотекам, например Angular UI для Bootstrap. OP хотел бы создать директивы и т.д., Которые можно использовать в других приложениях, не зная основного имени приложения.

Вы можете сделать это так:

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

Сохранено как "hello-world.js", например.

Убедитесь, что вы включили этот JS на свою страницу. Затем в главном Angular приложении:

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

Затем в любом месте вашего HTML в области приложения вы можете вставить:

<hello></hello>

И эта директива возьмет на себя рендеринг тега абзаца со словами "Привет, мир!". внутри.

Я понимаю, что вы можете сделать это со всеми объектами Angular - сервисами, фабриками, поставщиками и т.д.

Ответ 4

Если я не ошибаюсь, даже встроенные директивы принадлежат модулю (модуль ng). Это просто, что вам не нужно явно объявлять зависимость от него, как это делается каркасом для вас. Поэтому вам всегда нужно объявлять модуль, добавлять директивы (-и) в этот модуль и зависеть от этого модуля в других модулях. Что-то вроде этого:

// 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'
]);