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

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

ただいまの
回答率

90.37%

  • AngularJS

    614questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,631

ueda.kojiro

score 2

前提・実現したいこと

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

 実装イメージ

var common = angular.module( "common", [] );
common.component( "modal", {
  template: "<div class="modal" ng-bind="$ctrl.message" ng-show="$ctrl.isShowing"></div>",
  controller: function() {
    var that = this;
    this.message = "";
    this.show = function( message ) {
      that.message = message;
      that.isShowing = true;
    }
  }
} );

var app = angular.module( "myApp", [ "common" ] );
app.component( "parent", {
  template: "<modal></modal>" +
            "<button ng-click=\"$ctrl.onClick()\">Alert</button>";
  controller: function() {
    var that = this;
    this.onClick = function() {
      // なんらかの手段で alert.show( "Hello World!" ); したい・・・!
    }
  }
} );

 知りたいこと

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

試したこと

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

alertController = function( $scope ) {
  $scope.child.alert = this;
  this.show = function() {
    // 省略
  }
};

parentController = function( $scope ) {
  $scope.child = {};
  this.onClick = function() {
    $scope.child.alert.show( "Hello World!" );
  }
}

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

  • AngularJS v1.6.4を利用しています。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • akabee

    2017/06/09 16:19

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

    キャンセル

  • akabee

    2017/06/09 16:22

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

    キャンセル

回答 1

checkベストアンサー

0

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/12 14:21

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

    キャンセル

  • 2017/06/12 15: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に関わる部分のみの操作に留めるのがコードの可視性や可読性の観点でも良いのではないでしょうか。

    キャンセル

  • 2017/06/27 18:02

    公式ドキュメントまで確認していただいてありがとうございます!
    (返答が遅くなってしまい申し訳ありません。。。)

    > componentのcontrollerに共有したいような処理を定義すること自体が微妙という結論

    そういうことのようですね。できないとか難しいのであれば、それはやるべきではないということなのだと理解しました。
    ありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • AngularJS

    614questions

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