Question

我有一个表单，其中包含以模态显示的其他数据字段：

<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
  };

};

如何将用户输入从模态表单读取/注入/传输到主表单？

Answer 1

您需要的是在两个控制器之间进行通信，这可以通过创建服务来实现。

使用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()

您还需要将参数“sharedInput”传递给ModalCtrl和FormCtrl，就像传递$ scope一样。现在你让两个控制器进行通信。

Answer 2

我找到了一个comment to an issue on GitHub，其中有一个使用angular-ui来解释问题和解决方案，但没有共享服务。像魅力一样。

http://plnkr.co/edit/ktfq0Y?p=preview

在AngularJS中将数据形式的数据注入父表单？

2 个答案: