Javascript 如何从 angular ui bootstrap modal 传递表单数据来查看
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26570653/
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
How to pass form data from angular ui bootstrap modal to view
提问by user2016462
I'm creating a webapp and I want to implement an option to add friends. I've created the add friend page as a modal with a text input field. I want to test this by displaying the input on my view page. How do I display this data onto my view page?
我正在创建一个 web 应用程序，我想实现一个添加朋友的选项。我已经创建了添加朋友页面作为带有文本输入字段的模式。我想通过在我的视图页面上显示输入来测试这个。如何在我的视图页面上显示这些数据？
Here's what I currently have
这是我目前拥有的
index.html
索引.html
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<form name = "addFriendForm">
<input ng-model = "user.name"class="form-control" type = "text" placeholder="Username" title=" Username" />
{{ user.name }}
</form>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Add Friend</button>
<div> Username: {{user.name}}</div>
</div>
my JavaScript file:
我的 JavaScript 文件：
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.user = {name: ""}
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function () {
$scope.user.name = user.name;}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close($scope.user.name);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
plunkr: http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview
plunkr：http://plnkr.co/edit/JioiNx47KXsY8aqbTUDS?p=preview
回答by Matt
Resolve - plunkr
解决 - plunkr
You could make use of modalInstance's resolveproperty; this acts as the link between the modal instance and the parent controller.
你可以利用modalInstance的resolve财产；这充当模态实例和父控制器之间的链接。
You inject the object in to the ModalInstanceController, and assign it to the scope of your modal instance.
您将对象注入到 中ModalInstanceController，并将其分配给您的模态实例的范围。
UI Bootstraps resolve works exactly the same as ngRouter's; as such if for whatever reason resolvecannot resolvean object, the modal will not open.
UI Bootstraps 解析的工作方式与 ngRouter 的完全相同；因此，如果由于某种原因resolve无法解析对象，则模式将不会打开。
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
user: function() {
return $scope.user;
}
}
});
Scope - plunkr
范围 - plunkr
An alternative, and arguably simpler method would be to pass in the parents scope in to the modal. Note that currently this doesn't work when using controllerAssyntax on the parent controller.
另一种可以说更简单的方法是将父作用域传递给模态。请注意，当前controllerAs在父控制器上使用语法时这不起作用。
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
scope: $scope
});
回答by barryku
I would suggest using the promise from the result to set the value to your controller's variables instead. The "resolve" from my understanding is for passing controller's variable to the dialog for using inside the dialog, not to be changed directly. In your code example, passing result you set in $modalInstance.close() to modalInstance.result.then() will do the trick. In other words, changing line #18 and #19 to the following,
我建议使用结果中的承诺将值设置为控制器的变量。我理解的“解决”是将控制器的变量传递给对话框以在对话框内部使用，而不是直接更改。在您的代码示例中，将您在 $modalInstance.close() 中设置的结果传递给 modalInstance.result.then() 就可以了。换句话说，将第 18 行和第 19 行更改为以下内容，
modalInstance.result.then(function (data) {
$scope.user.name = data;
To improve the code a bit, you can actually pass the entire user object to allow adding additional attributes such as email, address, etc. to your user object easily. I had create an example at http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview.
为了稍微改进代码，您实际上可以传递整个用户对象，以便轻松地向您的用户对象添加其他属性，例如电子邮件、地址等。我在http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview 上创建了一个示例。
