Within my project, Angular Material is being used for various dialogs, primarily for alert purposes. However, I now find myself in need of a more complex dialog.
The example provided on the Angular Material site showcases how to create a dialog:
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();
}
}
}
My question is whether it's possible not to specify a separate controller for the $mdDialog, but instead allow it to use the same controller from which it was called?
For instance, if triggered by this button, can the dialog simply utilize the existing MyCtrl controller to access scope variables?
<div ng-controller="MyCtrl">
<md-button ng-click="showDialog($event)" class="md-raised">
Custom Dialog
</md-button>
</div>
Is this feasible, or do I need to continuously rely on the locals property and broadcasting to pass variables between controllers?