Javascript 将数据传递给 mdDialog
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31240772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing data to mdDialog
提问by TechCare99
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.
主列表页面有编辑按钮。这将打开已编辑行的详细信息。
方式 1：现在，如果我设置“ctrl.parent.q_details.client_location”，它会与父列表控制器绑定，它作为 2 向绑定工作，并在编辑框更改时自动更改值，这不是这里的要求.
这里只是我想在输入框中显示并允许编辑值。不想在父控制器中进行更改。
? Following is the code in parent controller to call mdDialog
? 以下是父控制器中调用 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.
? 以下是弹出 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).
方式2 ：第二种方式是直接从DB发送值，而不绑定到Dialog控制器（deliverController）的ng-model。
]).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.
这是 undefine $scope.qe 的错误。
所以最终，我无法将数据发送到 mdDialogue 并显示它们并允许以正常方式编辑它们。请任何有经验的有角的人帮助我。我是角度的新手。我从 2 天开始尝试不同的方法。
回答by pascalwhoop
This guy always has the right answer: https://github.com/angular/material/issues/455#issuecomment-59889129
这家伙总是有正确的答案：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.
使用传递对象中的 locals 属性传递变量。这些值将被注入控制器而不是 $scope。同样传递父级的整个 $scope 可能不是一个好主意，因为它破坏了隔离范围范式。
回答by BERGUIGA Mohamed Amine
HTML
HTML
<md-button ng-click='vmInter.showDialog($event,_dataToPass)'>
<i class="fa fa-custom-edit" aria-hidden="true"></i>
</md-button>
Js
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);
}
回答by nat_jea
$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
});
};
};
回答by DotBot
The ES6 TL;DR way
ES6 TL;DR 方式
Create a controller with scope variables on the fly
动态创建具有范围变量的控制器
let showDialog = (spaceApe) => {
$mdDialog.show({
templateUrl: 'dialog.template.html',
controller: $scope => $scope.spaceApe = spaceApe
})
}
Template
模板
Voilà, spaceApecan now be used in the dialog template
瞧，spaceApe现在可以在对话框模板中使用
<md-dialog>
<md-dialog-content>
<span> {{spaceApe | json}} </span>
<md-dialog-content>
<md-dialog>
回答by Danmar Herholdt
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/>Reservtheitroad: {{ ctrl.data.RESERVtheitroad }}
</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>
