Passare i dati a mdDialog

Question

La pagina di elenco principale ha il pulsante di modifica. Che apre i dettagli della riga modificata.
Way-1: Ora, se si imposta "ctrl.parent.q_details.client_location" è associato al controller di elenco padre e funziona come binding a 2 vie e modifica automaticamente i valori come nelle modifiche della casella di modifica, che non è richiesto qui
Qui voglio solo visualizzare e consentire i valori di modifica in inputbox. Non voglio essere cambiato nel controller principale.

► In seguito è il codice di controllo genitori per chiamare mdDialog

$mdDialog.show({ 
       locals:{parent: $scope},     
       clickOutsideToClose: true,     
       controllerAs: 'ctrl',     
       templateUrl: 'quotation/edit/',//+edit_id, 
       controller: function() { this.parent = $scope; }, 
      }); 

► In seguito è il codice del 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: secondo modo trasmette il valore direttamente dal DB senza legarsi a ng-modello del controller di dialogo (deliverController).

]).controller("deliverController", ["$scope", "$filter","$http","$route","$window","$mdDialog", 
    function ($scope, $filter,$http,$route,$window,$mdDialog) { 
     $scope.qe.client_name = '12345'; // just to test.   
    } 

Questo sta dando errore undefine $ scope.qe.

Quindi, alla fine, non sono in grado di inviare dati a mdDialogue e visualizzarli e consentire di modificarli come di consueto. Per favore, chiunque abbia esperienza di un ragazzo angoloso aiutami. Sono nuovo di angolare. Sto provando diversi modi da 2 giorni.

Answer 1

Questo ragazzo ha sempre la risposta giusta: https://github.com/angular/material/issues/455#issuecomment-59889129

In breve:

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

passare la variabile utilizzando l'attributo locali nell'oggetto passaggio. questi valori verranno iniettati nel controller e non nel $ scope. anche passare l'intero $ scope del genitore potrebbe non essere una buona idea in quanto sconfigge il paradigma dell'ambito isolato.

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

Answer 3

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

};

Answer 4

L'ES6 TL; DR modo

Creare un controller con le variabili di ambito al volo

let showDialog = (spaceApe) => { 
    $mdDialog.show({ 
     templateUrl: 'dialog.template.html', 
     controller: $scope => $scope.spaceApe = spaceApe 
    }) 
} 

Template

Voilà, spaceApe può ora essere utilizzato nel modello di finestra di dialogo

<md-dialog> 
    <md-dialog-content> 
     <span> {{spaceApe | json}} </span> 
    <md-dialog-content> 
<md-dialog>