javascript AngularJS - 将对象数据传递到模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17347127/
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
AngularJS - Pass object data into modal
提问by Nick
I have an information screen in which I'm using a repeater to build out information on a specific user.
我有一个信息屏幕，我在其中使用中继器构建有关特定用户的信息。
When the "Edit" button is clicked, how can I pass the specific user object data into the modal window template?
单击“编辑”按钮时，如何将特定用户对象数据传递到模态窗口模板中？
HTML
HTML
<form class="custom" ng-controller="DepCtrl" ng-cloak class="ng-cloak">
<fieldset ng-repeat="object in data.dataset">
<legend><span>{{ object.header }}</span><span class="dep_rel">({{ object.relation }}) </span></legend>
<div class="row">
<div class="four columns" ng-repeat="o in object.collection.inputs">
<span class="table_label">{{ o.label }}:</span><span class="table_answer">{{ o.value }}</span><br>
</div>
</div>
<div class="row">
<a ng-click="openDialog('edit')" style="color:#444;text-decoration:none;margin-right:10px;margin-top:5px;" class="btn_gray smaller left" href="#">Edit</a>
<a style="color:#444;text-decoration:none;margin-top:5px;" class="btn_gray smaller" href="#">Delete</a>
</div>
</fieldset>
</form>
JS
JS
function DepCtrl($scope, Dependents, $dialog) {
$scope.data = Dependents;
var t = '<div class="modal-header">'+
'<h3>' + $scope.header.value + '</h3>'+
'</div>'+
'<div class="modal-body">'+
'<p>Enter a value to pass to <code>close</code> as the result: <input ng-model="result" /></p>'+
'</div>'+
'<div class="modal-footer">'+
'<button ng-click="close(result)" class="btn btn-primary" >Close</button>'+
'</div>';
$scope.opts = {
backdrop: true,
keyboard: true,
dialogFade: true,
backdropClick: false,
template: t, // OR: templateUrl: 'path/to/view.html',
controller: 'TestDialogController'
};
$scope.openDialog = function(action){
var d = $dialog.dialog($scope.opts);
//if (action === 'edit') { $scope.opts.templateUrl = '../../modal.html'; }
d.open().then(function(result){
if(result)
{
alert('dialog closed with result: ' + result);
}
});
};
}
回答by Stewie
It helps to know which $dialog service you are referring to exactly, since $dialog is not the part of core AngularJS API.
Assuming that you are using the $dialog service from the ui-bootstrap, you can pass your user object into the dialog controller through the resolveproperty of $dialog configuration object.
它有助于知道您确切指的是哪个 $dialog 服务，因为 $dialog 不是核心 AngularJS API 的一部分。假设您正在使用ui-bootstrap 中的 $dialog 服务，您可以通过resolve$dialog 配置对象的属性将您的用户对象传递到对话框控制器中。
As the $dialog documentationstates it:
正如$dialog 文档所述：
resolve: members that will be resolved and passed to the controller as locals
resolve：将被解析并作为本地人传递给控制器的成员
function DepCtrl($scope, Dependents, $dialog) {
$scope.data = Dependents;
$scope.opts = {
backdrop: true,
keyboard: true,
dialogFade: true,
backdropClick: false,
template: t, // OR: templateUrl: 'path/to/view.html',
controller: 'TestDialogController',
resolve: {
user: function(){
return $scope.data;
}
}
};
$scope.openDialog = function(action){
var d = $dialog.dialog($scope.opts);
d.open();
};
}
/**
* [TextDialogController description]
* @param {object} $dialog instance
* @param {mixed} user User object from the resolve object
*/
function TextDialogController(dialog, user){
...
}
