[解決済み] angularjsのディレクティブでコントローラを要求する方法
質問
あるディレクティブのコントローラを別の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
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法