创建要在任何模块中使用的角度指令

Question

我最近使用了angular.js,但我需要一个关于Directives的小解释.

如何在不将其链接到特定模块的情况下创建指令,并且可以在任何模块中使用,例如内置指令.

Answer 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', []);

现在,您的服务可以位于自己的模块中,并从应用程序模块中调用.这基本上是Ajay所说的.

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

Answer 2

简答:不,这是不可能的.所有指令必须是模块的一部分.

该角文档说

与控制器非常相似,指令在模块上注册.要注册指令,请使用module.directive API.module.directive

没有办法在模块之外定义指令.

Angular内置指令以及它们在一个名为ng- 参见源代码的模块上定义.

该模块使用Angular内部方法创建setUpModuleLoader(请参阅AngularPublic.js和loader.js).

此函数不是Angular公共API的一部分,因此您无法自行访问它.您需要在自己的模块中定义指令.依赖于此模块的任何应用程序模块都可以使用您的指令.

这是观察事物的一种非常有角度的方式 - 避免使用公共物体,但尽可能地注入物品.

Answer 3

我想我明白OP意味着什么.类似于Angular UI for 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>

该指令将接管使用"Hello,world!"字样呈现段落标记.内.

我的理解是你可以用所有Angular对象 - 服务,工厂,提供者等来做到这一点.