Créer une directive angulaire à utiliser dans n'importe quel module

J'Ai dernièrement utilisé angular.js mais j'ai besoin d'une petite explication concernant les Directives.

Comment puis-je créer une directive sans le relier à un module spécifique et peut être utilisé dans n'importe quel module, tels que l'accumulation dans les directives.

source d'informationauteur Ghyath Serhal

  1. 20

    Une directive ou d'un service appartenant à un module. Ce que vous pouvez faire est de créer des modules séparés pour vos directives et puis de les injecter dans votre application principale du module. Voici mon 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', []);

    Maintenant, votre Service peut être dans son propre module et a appelé à partir de l'application module. C'est essentiellement ce que Ajay dit.

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

    Réponse courte: non, il n'est pas possible. Toutes les directives doivent faire partie d'un module.

    La Angulaire docs dire

    Beaucoup comme les contrôleurs, les directives sont inscrits sur les modules. Pour vous inscrire à une directive, vous utilisez le module.la directive de l'API. le module.la directive

    Il n'y a pas un moyen de définir une directive à l'extérieur d'un module.

    Angulaire intégrée dans les directives themseves sont définies sur un module appelé ng - voir le le code source.

    Ce module est créé à l'aide de l'angle interne de la méthode setUpModuleLoader (voir AngularPublic.js et loader.js).

    Cette fonction ne fait pas partie de l'Angulaire de l'API publique, de sorte que vous ne pouvez pas y accéder vous-même. Vous devez définir vos directives dans votre propre module. N'importe quelle application module qui dépend de ce module sera en mesure d'utiliser vos directives.

    C'est un très Anguleux façon de voir les choses - public, éviter les objets, mais faire les choses injectable dans la mesure du possible.

  3. 7

    Je pense que je comprends ce que l'OP moyens. Semblables à des bibliothèques comme Angulaire de l'INTERFACE utilisateur pour Bootstrap. L'OP voudrais créer directives, etc. qui peut être utilisé dans d'autres applications, sans avoir à connaître le principal nom de l'application.

    Vous pouvez le faire comme ceci:

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

    Enregistré comme "hello-world.js' par exemple.

    Assurez-vous d'inclure que JS dans votre page. Ensuite, à l'intérieur de votre principal Angulaire application:

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

    Puis n'importe où dans votre code HTML en vertu de l'application, vous pouvez insérer:

    <hello></hello>

    Et que la directive va prendre sur le rendu d'une balise de paragraphe avec les mots "Hello, world!" à l'intérieur.

    Ma compréhension est que vous pouvez faire cela avec tous Angulaire des objets - services, les usines, les fournisseurs, etc.

  4. 1

    Si je m trompe pas encore intégrées dans les directives appartiennent à un module (ng module). Il est juste que vous n'avez pas à déclarer explicitement une dépendance sur lui car il est fait par le cadre pour vous. C'est pourquoi vous aurez toujours de déclarer un module, ajouter la directive(s) pour ce module et qui dépendent de ce module dans d'autres modules. Quelque chose comme ça :

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