Passing data to mdDialog

JavascriptAngularjsModal DialogMaterial DesignAngular Material

Javascript Problem Overview



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.

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

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 - Javascript

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

};

Solution 4 - Javascript

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 5 - Javascript

This worked for me:

        confirmNewData = function() {
        let self = this;
        this.$mdDialog.show({                
            templateUrl: '/dist/views/app/dialogConfirmAFEData.html',
            controllerAs: "ctrl",                                
            controller: $scope => $scope = { $mdDialog: self.$mdDialog, 
                                             data: self.FMEData, 
                                             cancel: function() { this.$mdDialog.cancel(); }, 
                                             confirm: function() { this.$mdDialog.hide(); }  
                                           },
            clickOutsideToClose: false
        }).then(function() {
            // User Accepted!!
            console.log('You accepted!!!');
        }, function() {
            // User cancelled, don't do anything.
            console.log('You cancelled!!!');
        });
    };

And in the view...

<md-dialog aria-label="Start New AFE" style="min-width: 50%;">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>GIS Data...</h2>          
      </div>
    </md-toolbar>
    <md-dialog-content>
        <div layout="column" layout-padding>
            <li/>Lease: {{ ctrl.data.LEASE }}    
            <li/>Reservoir: {{ ctrl.data.RESERVOIR }}    
        </div>
    </md-dialog-content>

    <md-dialog-actions layout="row">
      <md-button class="md-button" ng-click="ctrl.cancel()">Cancel</md-button>
      <md-button class="md-button" ng-click="ctrl.confirm()">Yes</md-button>                
    </md-dialog-actions>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTechCare99View Question on Stackoverflow
Solution 1 - JavascriptpascalwhoopView Answer on Stackoverflow
Solution 2 - JavascriptBERGUIGA Mohamed AmineView Answer on Stackoverflow
Solution 3 - Javascriptnat_jeaView Answer on Stackoverflow
Solution 4 - JavascriptShayaView Answer on Stackoverflow
Solution 5 - JavascriptDanmar HerholdtView Answer on Stackoverflow