Passing data to mdDialog
Solution 1
This guy always has the right answer: https://github.com/angular/material/issues/455#issuecomment-59889129
In short:
$mdDialog.show({
locals:{dataToPass: $scope.parentScopeData},
clickOutsideToClose: true,
controllerAs: 'ctrl',
templateUrl: 'quotation/edit/',//+edit_id,
controller: mdDialogCtrl,
});
var mdDialogCtrl = function ($scope, dataToPass) {
$scope.mdDialogData = dataToPass
}
Pass the variable using the locals attribute in the passing object. These values will be injected into the controller not the $scope. Also passing the entire $scope of the parent might not be such a good idea as it defeats the isolated scope paradigm.
Solution 2
HTML
<md-button ng-click='vmInter.showDialog($event,_dataToPass)'>
<i class="fa fa-custom-edit" aria-hidden="true"></i>
</md-button>
Js
function _showSiebelDialog(event,_dataToPass) {
$mdDialog.show({
locals:{dataToPass: _dataToPass}, //here where we pass our data
controller: _DialogController,
controllerAs: 'vd',
templateUrl: 'contentComponents/prepare/views/Dialog.tmpl.html',
parent: angular.element(document.body),
targetEvent: event,
clickOutsideToClose: true
})
.then(
function(answer) {},
function() {
}
);
};
function _DialogController($scope, $mdDialog,dataToPass) {
console.log('>>>>>>> '+dataToPass);
}
Solution 3
The ES6 TL;DR way
Create a controller with a scope variables on the fly:
let showDialog = (spaceApe) => {
$mdDialog.show({
templateUrl: 'dialog.template.html',
controller: $scope => $scope.spaceApe = spaceApe
})
}
Voilà, spaceApe
can now be used in the dialog template
<md-dialog>
<md-dialog-content>
<span> {{spaceApe | json}} </span>
<md-dialog-content>
<md-dialog>
Solution 4
$scope.showPrompt = function(yourObject) {
$mdDialog.show({
templateUrl: 'app/views/your-dialog.tpl.html',
locals: {
callback: $scope.yourFunction // create the function $scope.yourFunction = function (yourVariable) {
},
controller: function ($scope, $mdDialog, callback) {
$scope.dialog.title = 'Your title';
$scope.dialog.abort = function () {
$mdDialog.hide();
};
$scope.dialog.hide = function () {
if ($scope.Dialog.$valid){
$mdDialog.hide();
callback($scope.yourReturnValue, likes the return of input field);
}
};
},
controllerAs: 'dialog',
bindToController: true,
clickOutsideToClose: true,
escapeToClose: true
});
};
TechCare99
Updated on September 19, 2021Comments
-
TechCare99 over 2 years
Main listing page has edit button. Which opens details of the edited row.
Way-1: Now, if I set "ctrl.parent.q_details.client_location" it is bind with parent listing controller and it works as 2-way binding and automatically changes the values as in the edit box changes, Which is not requirement here.
Here just I want to display and allow edit values in inputbox. Not want to get changed in parent controller.► Following is the code in parent controller to call mdDialog
$mdDialog.show({ locals:{parent: $scope}, clickOutsideToClose: true, controllerAs: 'ctrl', templateUrl: 'quotation/edit/',//+edit_id, controller: function () { this.parent = $scope; }, });
► Following is code of the popup mdDialog.
<md-dialog aria-label=""> <div ng-app="inputBasicDemo" ng-controller="deliverController" layout="column"> <form name="" class="internal_note_cont"> <md-content class="md-padding"> <md-input-container class="md-input-has-value" flex> <label>Client Name</label> <input ng-model="qe.client_name" required > </md-input-container> <md-input-container flex> <label>Client Location</label> <input required ng-model="ctrl.parent.q_details.client_location"> </md-input-container> </md-content> </form> <div> </div> </div> <input type="" required ng-model="ctrl.parent.q_details.recid"> </md-dialog>
Way2: second way is sending the value directly from DB without binding to ng-model of Dialog controller(deliverController).]).controller("deliverController", ["$scope", "$filter","$http","$route","$window","$mdDialog", function ($scope, $filter,$http,$route,$window,$mdDialog) { $scope.qe.client_name = '12345'; // just to test. }
This is giving error of undefine $scope.qe .
So ultimately, I am not able to send data to mdDialogue and display them and allow edit them as normal way. Please anyone experienced angular guy help me. I am new to angular. I am trying different ways since 2 days.