4

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

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

};

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

4

2 回答 2

3

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

以此为参考。

您可以按如下方式创建服务： 

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 一样。现在你的两个控制器正在通信。

于 2013-04-02T13:46:26.617 回答
0

我在 GitHub 上发现了一个问题的评论，其中一个 plunker 解释了问题和使用 angular-ui 的解决方案，没有共享服务。奇迹般有效。

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

于 2013-04-02T13:52:48.237 回答