我有一个带有以模式显示的附加数据字段的表单:

<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 正在通信。

10-05 20:37
查看更多