Angular Materialダイアログで同じコントローラを使用するにはどうすればいいですか？

Question

私はプロジェクト内で角材を使用しています。私は多くのダイアログを（警告目的のために）使用していますが、今は非常に複雑なダイアログが必要です。

これは角素材サイトが使用している例です。

function showDialog($event) { 
    var parentEl = angular.element(document.body); 
    $mdDialog.show({ 
    parent: parentEl, 
    targetEvent: $event, 
    template: '<md-dialog aria-label="List dialog">' + 
     ' <md-dialog-content>' + 
     ' <md-list>' + 
     '  <md-list-item ng-repeat="item in items">' + 
     '  <p>Number {{item}}</p>' + 
     '  ' + 
     ' </md-list-item></md-list>' + 
     ' </md-dialog-content>' + 
     ' <md-dialog-actions>' + 
     ' <md-button ng-click="closeDialog()" class="md-primary">' + 
     '  Close Dialog' + 
     ' </md-button>' + 
     ' </md-dialog-actions>' + 
     '</md-dialog>', 
    locals: { 
     items: $scope.items 
    }, 
    controller: DialogController 
    }); 

    function DialogController($scope, $mdDialog, items) { 
    $scope.items = items; 
    $scope.closeDialog = function() { 
     $mdDialog.hide(); 
    } 
    } 
} 

代わりに、それは可能$mdDialogためcontrollerを参照しないようにされるだろう、とただそれはそれがあった同じコントローラを使用できるようにしますから呼ばれた？

たとえば、このボタンで呼び出された場合、ダイアログではMyCtrlコントローラを使用するだけで、ダイアログがスコープ変数にアクセスできるようになります。

<div ng-controller="MyCtrl"> 
    <md-button ng-click="showDialog($event)" class="md-raised"> 
    Custom Dialog 
    </md-button> 
</div> 

これは可能ですか？または、変数を前後に渡り続けるために、放送と一緒にlocalsプロパティを継続して使用する必要がありますか？

Answer 1

controllerAsを使用するとそうすることができます。それは次のようになりますES6なければ

this.$mdDialog.show({ 
    targetEvent: event, 
    templateUrl: 'path/to/my/template.html', 
    controller:() => this, 
    controllerAs: 'ctrl' 
}); 

：私はそのようなES6でそれをやっている

.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) { 
    var self = this; 

    this.showTabDialog = function(ev) { 
     $mdDialog.show({ 
      controller: function() { 
       return self; 
      }, 
      controllerAs: 'ctrl', 
      templateUrl: 'tabDialog.tmpl.html', 
     }); 
    }; 
}); 

私は、ドキュメントからの基本的な使用例を修正： http://codepen.io/kuhnroyal/pen/gPvdPp