質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

3434閲覧

AngularJSで親コンポーネントから子コンポーネントを呼び出す

ueda.kojiro

総合スコア10

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2017/06/09 07:01

編集2017/06/09 07:33

###前提・実現したいこと

AngularJSを使って、システムを作ろうとしています。
共通のモジュールを作って、そこから共通の表示ができるようにしたいと考えています。
イメージとしては、例えば、モーダルダイアログを共通化したいと考えています。
モーダルダイアログのコンポーネントを作っておいて、どこからでも共通のモーダルダイアログが呼び出せるようにできないか、と考えています。
htmlに<modal></modal>と書いておけば、どこからでもmodalを操作できるようになったりしないかな?と思い、質問させていただきました。

実装イメージ

js

1var common = angular.module( "common", [] ); 2common.component( "modal", { 3 template: "<div class="modal" ng-bind="$ctrl.message" ng-show="$ctrl.isShowing"></div>", 4 controller: function() { 5 var that = this; 6 this.message = ""; 7 this.show = function( message ) { 8 that.message = message; 9 that.isShowing = true; 10 } 11 } 12} ); 13 14var app = angular.module( "myApp", [ "common" ] ); 15app.component( "parent", { 16 template: "<modal></modal>" + 17 "<button ng-click=\"$ctrl.onClick()\">Alert</button>"; 18 controller: function() { 19 var that = this; 20 this.onClick = function() { 21 // なんらかの手段で alert.show( "Hello World!" ); したい・・・! 22 } 23 } 24} );

知りたいこと

このとき、parentコンポーネントはどのようにしてalert.show()すればよいでしょうか?
そもそも、このような実装がAngularJSとしてふさわしくないものなのでしょうか?
ふさわしくない場合、どのようにするのが正解なのでしょうか?

###試したこと

$scopeなどを利用し、親から子へ入れ物を受け渡しておき、子が入れ物に、自身を入れることで、とりあえず親が子を参照できるようにはなりましたが、あまりきれいな実装とは思えず、正しい方法が知りたいのです。

js

1alertController = function( $scope ) { 2 $scope.child.alert = this; 3 this.show = function() { 4 // 省略 5 } 6}; 7 8parentController = function( $scope ) { 9 $scope.child = {}; 10 this.onClick = function() { 11 $scope.child.alert.show( "Hello World!" ); 12 } 13}

###補足情報(言語/FW/ツール等のバージョンなど)

  • AngularJS v1.6.4を利用しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

akabee

2017/06/09 07:19

やりたいことのイメージが掴めないのでご回答頂きたく。共通というからには、いくつかのページの処理をまとめる、ということがやりたいのだと思います。例えばページが10あったとして、それをどのように共通化したいのですか?
akabee

2017/06/09 07:22

共通の処理が作りたい場合、私ならServiceを作り、それを各Controllerに依存性注入しますが、その提案がueda.kojiroさんのやりたいことと合致しているかどうかが分かりません。
guest

回答1

0

ベストアンサー

質問の編集ありがとうございます。
共通の独自タグを使いたいということでしたら、ディレクティブが該当の機能になると思います。

こちらの冒頭、<test>というタグで<div>これはテストだよ!</div>を表示しているあたり、参考になるのではないでしょうか。

ディレクティブは使いこなそうとするとかなり複雑な機能ですが、挙動が掴めれば非常に強力ですので、是非この機会に習得してみて下さい。

ちなみに蛇足ですが、そういったモジュールはメインモジュールとは別にUI用のモジュールとして別管理しておき、モジュール呼び出し時に依存性を注入するようにすると、再利用が便利になります。

投稿2017/06/09 07:40

編集2017/06/09 07:43
akabee

総合スコア1947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ueda.kojiro

2017/06/09 07:45

回答ありがとうございます! てっきり、ディレクティブはコンポーネントの前身なのかと思っていたので、すべてコンポーネントを使って実装しようとしていました。。。 それぞれ目的が違うのですね。 ディレクティブを使っての実装を試してみようと思います!ありがとうございました。
akabee

2017/06/09 07:53

すみません、不勉強で、コンポーネントはディレクティブの後継?なのですね。 そうするとできることは変わらないはずなので、現状の私の回答では根本的な解決になっていないと思います。 componentの構文が良く分かっていないので、もう一度ueda.kojiroさんのコードを見て何かお伝えできることがないか考えてみます。
akabee

2017/06/09 07:58 編集

質問のコードを再確認してみましたが、parentを定義している箇所の意図が分かりません。modalの定義はcommonモジュールで行ってあるので、既にmyAppではmodalタグが利用できると思います。つまり現状のコードでparentが無くとも「どこからでもmodalを操作できるようになったり」しているように見えますが・・・。
ueda.kojiro

2017/06/12 05:21

返信くださっていたのですね。ありがとうございます! そもそも、AngularJSの使い方として間違っているのかもしれないのですが、modalディレクティブにメソッド(show)を用意して親コンポーネントなどからshowを呼び出すことができないか?と思ったのがきっかけでした。 requireを利用することで、子が親のメソッドを呼び出すことができるのはわかったのですが、逆はできないのかな?と思ったのです。 たとえば、親コンポーネントが持つボタンを押下したら通信を行い、通信結果をモーダルダイアログに表示したいとき、親コンポーネントからモーダルダイアログコンポーネントを呼び出すかと思ったのですが、呼び出し方がわからなかったのです。
akabee

2017/06/12 06:19

AngularJSの公式ドキュメントを見るとcomponentについては「In AngularJS, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.」とあり、コンポーネントベースの設計に向いているようですね。 私個人はコンポーネントベースの設計思想を習得できていないので、的外れなことを言っているかもしれませんが、普通はメソッドはcotrollerやserviceに定義するものだと思います。 componentにもcontrollerが定義できるようなので、ちょっと私個人としてそのcontrollerは一体どういうものなのかが把握しきれていませんが、今回のような要件で私が実装するのであれば、showメソッドはcomponentではなくserviceに定義し、controllerに依存性注入する形で共有すると思います。 「a Component is a special kind of directive」とあるように、componentがdirectiveのうちの一種である、というような理解で良いのであれば、componentのcontrollerに共有したいような処理を定義すること自体が微妙という結論でよいように思います。 あくまでcomponentで定義するcontrollerはそのcomponentに関わる部分のみの操作に留めるのがコードの可視性や可読性の観点でも良いのではないでしょうか。
ueda.kojiro

2017/06/27 09:02

公式ドキュメントまで確認していただいてありがとうございます! (返答が遅くなってしまい申し訳ありません。。。) > componentのcontrollerに共有したいような処理を定義すること自体が微妙という結論 そういうことのようですね。できないとか難しいのであれば、それはやるべきではないということなのだと理解しました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問