TechCare99 TechCare99 - 1 year ago 139
Javascript Question

Passing data to mdDialog in agular material

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

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 flex>
<label>Client Location</label>
<input required ng-model="ctrl.parent.q_details.client_location">
<input type="" required ng-model="ctrl.parent.q_details.recid">

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.

Answer Source

This guy always has the right answer:

In short:

            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.