Javascript 如何将表单数据从angular ui引导模式传递到视图
我正在创建一个webapp,我想实现一个添加好友的选项。我已经创建了添加好友页面,作为一个带有文本输入字段的模式。我想通过在我的视图页面上显示输入来测试这一点。如何将这些数据显示在我的查看页面上 这是我目前拥有的 index.htmlJavascript 如何将表单数据从angular ui引导模式传递到视图,javascript,angularjs,angular-ui-bootstrap-tab,Javascript,Angularjs,Angular Ui Bootstrap Tab,我正在创建一个webapp,我想实现一个添加好友的选项。我已经创建了添加好友页面,作为一个带有文本输入字段的模式。我想通过在我的视图页面上显示输入来测试这一点。如何将这些数据显示在我的查看页面上 这是我目前拥有的 index.html <div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html"> <div class=
<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>
plunkr:解决-
您可以使用modalInstance
的resolve
属性;这充当模态实例和父控制器之间的链接
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
scope: $scope
});
将对象注入到ModalInstanceController
,并将其分配给模态实例的范围
UI引导解析的工作原理与ngRouter完全相同;同样,如果由于任何原因resolve
无法解析对象,模态将不会打开
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
user: function() {
return $scope.user;
}
}
});
范围-
另一种可能更简单的方法是将父范围传递给模态。请注意,当前在父控制器上使用controllerAs
语法时,这不起作用
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
scope: $scope
});
我建议使用结果中的承诺来设置控制器变量的值。根据我的理解,“解析”是将控制器的变量传递给对话框,以便在对话框内部使用,而不是直接更改。在您的代码示例中,将在$modalInstance.close()中设置的结果传递给modalInstance.result.then()即可。换言之,将第18行和第19行更改为:
modalInstance.result.then(function (data) {
$scope.user.name = data;
为了稍微改进代码,您实际上可以传递整个用户对象,以允许轻松地向用户对象添加其他属性,如电子邮件、地址等。我已经在上创建了一个示例