2017-10-02 13 views
0

私はJavascriptとAnuglarJSの新機能ですが、私はJavaの経験があります。私はAngularJS developer's guide on directiveを勉強しており、質問があります。AngularJS - 指示文からコントローラにパラメータを渡す

「他の要素をラップするディレクティブを作成する」セクションには、example/demoがあります。例/デモでは:

ディレクティブmyDialogのテンプレートが怒鳴るようです:

<div class="alert"> 
    <a href class="close" ng-click="close({message: 'closing for now'})">&times;</a> 
    <div ng-transclude></div> 
</div> 

私はここにclose({message: 'closing for now'})を理解することはできません。ディレクティブの定義から:

scope: { 
    'close': '&onClose' 
} 

のでcloseは、ディレクティブの親でonCloseへの参照です。 onCloseは、コントローラで定義されているが、それには属性としてテンプレートだとさらにhideDialog(message)を参照して表示されていません。

<div ng-controller="Controller"> 
    {{message}} 
    <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)"> 
    Check out the contents, {{name}}! 
    </my-dialog> 
</div> 

質問:onClose以来

  1. が具体的に、コントローラで定義されていない、どのようにそれを取ることができますディレクティブから渡された入力パラメータを処理しますか?
  2. コントローラ内のhideDialogは文字列パラメータを受け取りますが、指令のcloseはオブジェクト{message: 'closing for now'}からonCloseを渡します。 onClose入力のmessageキーから値を抽出し、それをターゲット関数hideDialogに渡すという魔法はどうですか?

答えて

1

角度ディレクティブには、ディレクティブのコントローラにバインドできる値を定義する複数の方法があります。 '&'は親コントローラからディレクティブコントローラに関数を渡す方法です。上記で定義したインスタンスでは、親コントローラ(Controller)は、単一の引数(メッセージ)を受け取る 'scope'(実際にはクールではない)のメソッド(hideDialog)を持っています。 '& onClose'は、ディレクティブコントローラの 'close'変数にバインドされています。 'close'が呼び出されると、それはあたかもそれが名前付き引数(ここではes6のようなファッション)であるかのように 'message'を渡す必要があります。これは、ディレクティブコントローラの変数が親コントローラのメソッドを拡張する方法と、そのメソッドに変数を渡す必要があるためです。

関連する問題