1. ホーム
  2. javascript

[解決済み] angularjsのディレクティブでコントローラを要求する方法

2023-05-07 06:21:32

質問

あるディレクティブのコントローラを別のangularJSディレクティブにインクルードする方法をどなたか教えてください。 例えば、次のようなコードです。

var app = angular.module('shop', []).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/js/partials/home.html'
    })
        .when('/products', {
        controller: 'ProductsController',
        templateUrl: '/js/partials/products.html'
    })
        .when('/products/:productId', {
        controller: 'ProductController',
        templateUrl: '/js/partials/product.html'
    });
}]);

app.directive('mainCtrl', function () {
    return {
        controller: function ($scope) {}
    };
});

app.directive('addProduct', function () {
    return {
        restrict: 'C',
        require: '^mainCtrl',
        link: function (scope, lElement, attrs, mainCtrl) {
            //console.log(cartController);
        }
    };
});

どう考えてもaddProductディレクティブ内のコントローラにアクセスできるはずなのですが、そうではありません。もっと良い方法はないでしょうか?

どのように解決するのですか?

私は幸運にも、質問に対するコメントでこれに答えましたが、完全性のために完全な答えを投稿し、この質問を "Answered"としてマークできるようにします。


コントローラを共有することで何を達成したいかによります。同じコントローラを共有することもできますし(ただし、異なるインスタンス)、同じコントローラインスタンスを共有することもできます。

コントローラを共有する

以下のように、2つのディレクティブに同じメソッドを渡すことで、 同じコントローラを使用することができます。

app.controller( 'MyCtrl', function ( $scope ) {
  // do stuff...
});

app.directive( 'directiveOne', function () {
  return {
    controller: 'MyCtrl'
  };
});

app.directive( 'directiveTwo', function () {
  return {
    controller: 'MyCtrl'
  };
});

各ディレクティブは独自のコントローラのインスタンスを取得しますが、これにより、必要なだけ多くのコンポーネント間でロジックを共有することができます。

コントローラを要求する

を共有したい場合、同じ インスタンス を共有したい場合は、 コントローラの require .

require は、別のディレクティブの存在を確認し、そのコントローラをリンク関数のパラメータとして含めます。ですから、一つの要素に二つのディレクティブがある場合、 ディレクティブは require を要求し、そのコントローラのメソッドにアクセスできるようになります。よくある使用例としては ngModel .

^require のように、キャレットを追加することで、現在の要素に加え、上記のディレクティブの要素をチェックし、他のディレクティブを見つけようとします。これにより、サブコンポーネントがコントローラを通じて親コンポーネントと通信できるような複雑なコンポーネントを効果的に作成することができます。例としては、タブがあり、各ペインは全体のタブと通信して切り替えを処理することができます。

いずれの場合でも、この機能を使用するためには、2 つのディレクティブを一緒に使用する必要があります。 require はコンポーネント間の通信手段です。

詳しくは、ディレクティブのガイドページをご覧ください。 http://docs.angularjs.org/guide/directive