我有一个带有以模式显示的附加数据字段的表单:
<form class="form-horizontal" name="newForm" ng-controller="FormCtrl" ng-submit="submit()">
<label>Test</label>
<div ng-controller="ModalCtrl">
<a class="btn btn-link" ng-click="open()">Open</a>
<ng-include src="'partials/modal.html'"></ng-include>
</div>
</form>
包括:
<div modal="shouldBeOpen" close="close()" options="opts">
<div class="modal-header">
<h4>I'm a modal!</h4>
</div>
<div class="modal-body">
<ul>
<input type="text" tabindex="16" ng-model="someinput" name="someinput" size="32" class="validate[someinput]" />
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
</div>
</div>
JS:
var ModalCtrl = function ($scope) {
$scope.open = function () {
$scope.shouldBeOpen = true;
};
$scope.close = function () {
$scope.shouldBeOpen = false;
};
$scope.opts = {
backdropFade: true,
dialogFade:true
};
};
如何从模态表单读取/注入(inject)/传输用户输入到主表单?
最佳答案
您需要的是在两个 Controller 之间进行通信,这可以通过创建服务来实现。
使用 this 作为引用。
您可以按如下方式创建服务:
angular.module('myApp', [])
.service('sharedInput', function () {
var modalInput = "";
return {
getModalInput:function () {
return modalInput;
},
setModalInput:function (value) {
modalInput = value;
}
};
});
接下来,在您的
ModalCtrl()
函数中,我假设您将有一个按钮来提交输入。假设单击此按钮会调用 ModalCtrl 范围内的“submitInput”函数。您将此函数编写为:$scope.submitInput = function() {
sharedInput.setMOdalInput($scope.someinput);
}
...并且在您的
FormCtrl()
中,您将编写以下代码来读取模态输入:var input = sharedInput.getModalInput()
您还需要像传递 $scope 一样将参数“sharedInput”传递给 ModalCtrl 和 FormCtrl。现在您的两个 Controller 正在通信。