Question

我最近使用了angular.js，但我需要一些关于指令的小解释。

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

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

简短的回答：不，这是不可能的。所有指令必须是模块的一部分。

Angular docs说

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

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

Angular内置指令，它们是在名为ng的模块上定义的 - 请参阅source code。

此模块使用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对象 - 服务，工厂，提供者等来做到这一点。

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

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

4 个答案: