Come utilizzare lo stesso controller con una finestra di dialogo Materiale angolare?

Question

Uso materiale angolare nel mio progetto. Uso molte finestre di dialogo (solo per scopi di avviso), ma ora richiedo una finestra di dialogo abbastanza complessa.

Questo è l'esempio che il sito Materiale angolare utilizza:

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(); 
    } 
    } 
} 

Invece, sarebbe possibile non fare riferimento a un controller per il $mdDialog, e consentire solo in modo da utilizzare lo stesso controllore dove era chiamato da?

Ad esempio, se viene richiamato tramite questo pulsante, la finestra di dialogo utilizza semplicemente il controller MyCtrl in modo che la finestra di dialogo possa accedere alle variabili di ambito.

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

È questa una possibilità? O devo utilizzare continuamente la proprietà locals insieme alla trasmissione per mantenere le variabili di passaggio avanti e indietro?

Answer 1

È possibile farlo se si utilizza controllerAs. Lo sto facendo con ES6 così:

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

Senza ES6 essa sarà simile a questa:

.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', 
     }); 
    }; 
}); 

ho modificato l'esempio uso di base dalla documentazione: http://codepen.io/kuhnroyal/pen/gPvdPp