web-dev-qa-db-ja.com

モジュールで使用するディレクティブを作成するにはどうすればよいですか？

組み込みディレクティブなど、任意のモジュールで使用できる特定のモジュールにリンクせずにディレクティブを作成するにはどうすればよいですか。

angularjsangularjs-directiveangular-module
14
Ghyath Serhal

ディレクティブまたはサービスはモジュールに属している必要があります。できることは、ディレクティブ用に個別のモジュールを作成してから、それらをメインのアプリケーションモジュールに挿入することです。これが私の設定です：

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) {}]);
21
Pasha Riger

簡単な答え：いいえ、それは不可能です。すべてのディレクティブはモジュールの一部である必要があります。

Angular docs 言う

コントローラと同様に、ディレクティブはモジュールに登録されます。ディレクティブを登録するには、module.directiveAPIを使用します。 module.directive

モジュールの外部でディレクティブを定義する方法はありません。

Angular組み込みディレクティブは、ngというモジュールで定義されています ソースコード を参照してください。

このモジュールは、Angular内部メソッドsetUpModuleLoaderを使用して作成されます（ AngularPublic.js および loader.js を参照）。

この関数はAngular public APIの一部ではないため、自分でアクセスすることはできません。独自のモジュールでディレクティブを定義する必要があります。このモジュールに依存するアプリモジュールは次のようになります。ディレクティブを使用できます。

これは非常にAngular物事を見る方法です。公開オブジェクトは避けますが、可能な限り物事を注入可能にします。

8
joews

OPの意味は理解できたと思います。 Angular BootstrapのUIなどのライブラリに似ています。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 app：

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

次に、アプリスコープの下のHTMLの任意の場所に、次のものを挿入できます。

<hello></hello>

そして、そのディレクティブは、「Hello、world！」という単語を含む段落タグのレンダリングを引き継ぎます。以内に。

私の理解では、これはすべてのAngularオブジェクト-サービス、ファクトリ、プロバイダーなどで実行できます。

8
ldapmonkey

誤解しない限り、組み込みディレクティブもモジュール（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'
]);
1
Nicolas ABRIC