将数据传递给 mdDialog
Posted
技术标签:
【中文标题】将数据传递给 mdDialog【英文标题】：Passing data to mdDialog 【发布时间】：2015-09-23 07:12:25 【问题描述】：主列表页面有编辑按钮。这将打开已编辑行的详细信息。Way-1： 现在，如果我设置“ctrl.parent.q_details.client_location”，它将与父列表控制器绑定，并且它作为 2-way绑定并自动更改编辑框中的值更改，这不是这里的要求。 这里只是我想在输入框中显示并允许编辑值。不想在父控制器中更改。
► 以下是父控制器中调用 mdDialog 的代码
$mdDialog.show(
locals:parent: $scope,
clickOutsideToClose: true,
controllerAs: 'ctrl',
templateUrl: 'quotation/edit/',//+edit_id,
controller: function () this.parent = $scope; ,
);
► 以下是弹出 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>
方式 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.
这给出了 undefine $scope.qe 的错误。 所以最终，我无法将数据发送到 mdDialogue 并显示它们并允许以正常方式对其进行编辑。 请任何有经验的有角的人帮助我。我是角度的新手。 2 天以来，我一直在尝试不同的方式。
【问题讨论】：
您可以使用 ng-bind 设置一次性绑定。您还可以通过服务在父子之间传递数据。 你试过preserveScope: true吗？
【参考方案1】：
ES6 TL;DR 方式
动态创建具有范围变量的控制器：
let showDialog = (spaceApe) =>
$mdDialog.show(
templateUrl: 'dialog.template.html',
controller: $scope => $scope.spaceApe = spaceApe
)
瞧，spaceApe 现在可以在对话框模板中使用了
<md-dialog>
<md-dialog-content>
<span> spaceApe | json </span>
<md-dialog-content>
<md-dialog>
【讨论】：
【参考方案2】：这家伙总是有正确答案：https://github.com/angular/material/issues/455#issuecomment-59889129
简而言之：
$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
使用传递对象中的 locals 属性传递变量。这些值将被注入控制器而不是 $scope。同样传递父级的整个 $scope 可能不是一个好主意，因为它破坏了孤立的范围范式。
【讨论】：
如果在mdDialogCtrl中更改了mdDialogData，是否会在$scope.parentScopeData中反映出来？我有一个用例需要将当前范围的对象传递给 mdDialogCtrl 并且 mdDialogCtrl 中对该对象的更改应该在外部范围内捕获。谢谢！ 是的，它确实反映了，如果您通过本地传递一个对象引用，它确实反映了，尽管我希望它能够隔离而不是直接修改父级的范围数据，奇怪..！跨度> 知道如何在不使用 $scope 的情况下执行此操作吗？ .show 传入的对象字面量末尾是否应该有逗号？特别是说“mdDialogCtrl”的行 - 似乎不应该存在。【参考方案3】：这对我有用：
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!!!');
);
;
在视图中...
<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>
【讨论】：
【参考方案4】：$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
);
;
【讨论】：
【参考方案5】：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' 参数中再次将值传递给调用函数以上是关于将数据传递给 mdDialog的主要内容，如果未能解决你的问题，请参考以下文章