コンポーネント内のコンポーネントまたはmdDialogからバインドされたイベントを受け取る

Question

角度1.5とマテリアルデザインでは、「キャンセル」ボタン付きのfoobarを作成するためのパネルを表すコンポーネントを作成しました。明らかにパネルはダイアログ内にあるかどうかわからないので、「キャンセル」ボタンは単にコールバックを呼び出すだけです。具体的には、「キャンセル」ボタンを次にoncancel()コールバックを起動しようとするコントローラのcancel()方法、呼び出し：囲み成分で

angular.module("NewFooBarPanel", []) 
    .component("newFoobarPanel", { 
     templateUrl: "newfoobar-template.html", 
     bindings: { 
      onCancel: "&" 
     }, 
     controller: function() { 
      var controller = this; 

      controller.cancel = function() { 
       controller.clearForm(); 
       controller.onCancel({}); 
      } 

をFABがクリックされたとき、私はmdDialogを持ち出します。ダイアログがnewFoobarPanelが含まれています。私は、キャンセルボタンをクリックすると

angular.module("FoobarList", ["NewFooBarPanel"]) 
    .component("foobarList", { 
     templateUrl: "foobarlist-template.html", 
     controller: function($mdDialog) { 

      this.addFoobar = function(ev) { 

       $mdDialog.show({ 
         template: "<md-dialog aria-label='Add Foobar'><new-foobar-panel on-cancel='alert(\"need to cancel\")'></new-foobar-panel></md-dialog>", 
         targetEvent: ev, 
         clickOutsideToClose: true, 
         fullscreen: true 
        }); 

、フォームはので、私はnewFoobarPanelコントローラのcancel()メソッドが呼び出されていることを知ってクリアされます。しかし、私は警告ダイアログが表示されないので、なんらかの理由でのon-cancelコールバックが呼び出されていないようです。

これは、コンポーネント内のダイアログ内のコンポーネントを使用すると、（これは単純で直接的な使用例でも）複雑なものです。私はコールバックの呼び出しに問題を絞り込んだようです。どこで私は間違えましたか？

だから私は絵の中からmdDialogを取り除くことにしました。

<new-foobar-panel on-cancel='alert("need to cancel")'></new-foobar-panel> 

は今、これはただのコンポーネント内のコンポーネントで、まだ私はまだ警告ダイアログが表示されません。今、私は単にfoobarListコンポーネントに直接newFoobarPanelを埋め込みます。コールバックが呼び出されないのはなぜですか？

Answer 1

問題は、コールバックが呼び出されていないことではありませんでした。問題はそれを認識する方法でした。明らかにalert()はこのコンテキストでは機能しません。

だから私はmdDialogにコントローラを追加して、コールバックを受け取るために$scopeにメソッドを追加する必要がありました：

   $mdDialog.show({ 
         controller: function($scope, $log) { 
          $scope.notify=function() { 
          $log.debug("need to cancel"); 
          } 
         }, 
         template: "<md-dialog aria-label='Add Foobar'><new-foobar-panel on-cancel='notify()'></new-foobar-panel></md-dialog>", 
         targetEvent: ev, 
         clickOutsideToClose: true, 
         fullscreen: true 
        }); 

今ダイアログ・コントローラが組み込まれたコンポーネントはコールバックを呼び出し、メッセージをログに記録します！すばらしいです！

$scopeの代わりにコントローラメソッドを追加する方が良い場合は（に頼ることができますか）、私に教えてください。

（今はコントローラからmdDialogを閉じる方法を理解する必要がありますが、これは別の問題です）