Transmission de données à mdDialog
La page principale de la liste a le bouton Modifier. Qui ouvre les détails de la ligne éditée.
Moyen-1: Maintenant, si j'ai mis "ctrl.parent.q_details.client_location " il est lié avec le contrôleur de liste parent et il fonctionne comme une liaison à 2 voies et modifie automatiquement les valeurs comme dans les modifications de la boîte d'édition, ce qui n'est pas obligatoire ici.
Ici, je veux juste afficher et autoriser les valeurs d'édition dans inputbox. Je ne veux pas être changé dans le contrôleur parent.
► Voici le code dans parent contrôleur pour appeler mdDialog
$mdDialog.show({
locals:{parent: $scope},
clickOutsideToClose: true,
controllerAs: 'ctrl',
templateUrl: 'quotation/edit/',//+edit_id,
controller: function () { this.parent = $scope; },
});
► Voici le code du 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: la deuxième façon est d'envoyer la valeur directement à partir de DB sans se lier à 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.
}
Cela donne une erreur de undefine $ scope.qe .
donc, en fin de Compte, Je ne suis pas en mesure d'envoyer des données à mdDialogue et de les afficher et de permettre de les modifier comme d'habitude.
Veuillez quelqu'un d'expérimenté angulaire gars m'aider. Je suis nouveau angulaire.
J'essaie de différentes façons depuis 2 jours.
5 réponses
Ce mec a toujours la bonne réponse: https://github.com/angular/material/issues/455#issuecomment-59889129
En bref:
$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
}
Passez la variable en utilisant l'attribut locals dans l'objet passant. Ces valeurs seront injectées dans le contrôleur pas dans $scope . Passer également toute la portée $du parent pourrait ne pas être une bonne idée car cela défait le paradigme de portée isolée.
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);
}
$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
});
};
Le ES6 TL; DR façon
Créer un contrôleur avec des variables de portée à la volée
let showDialog = (spaceApe) => {
$mdDialog.show({
templateUrl: 'dialog.template.html',
controller: $scope => $scope.spaceApe = spaceApe
})
}
Le Modèle
Voilà, spaceApe peut maintenant être utilisé dans le modèle de dialogue
<md-dialog>
<md-dialog-content>
<span> {{spaceApe | json}} </span>
<md-dialog-content>
<md-dialog>
Cela a fonctionné pour moi:
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!!!');
});
};
Et dans la vue...
<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>