如何将表单数据从角度ui bootstrap模式传递到视图

I'm creating a webapp and I want to implement an option to add friends. I've created the add friend page as a modal with a text input field. I want to test this by displaying the input on my view page. How do I display this data onto my view page?

我正在创建一个webapp，我想实现一个添加朋友的选项。我已经将添加好友页面创建为带有文本输入字段的模态。我想通过在我的视图页面上显示输入来测试它。如何在我的视图页面上显示此数据？

Here's what I currently have

这是我现在拥有的

index.html

的index.html

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

my JavaScript file:

我的JavaScript文件：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.user = {name: ""}

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function () {
      $scope.user.name = user.name;}, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

  $scope.ok = function () {
    $modalInstance.close($scope.user.name);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

plunkr: http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview

plunkr：http：//plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview

2 个解决方案

#1

Resolve - plunkr

You could make use of modalInstance's resolve property; this acts as the link between the modal instance and the parent controller.

您可以使用modalInstance的resolve属性;这充当模态实例和父控制器之间的链接。

You inject the object in to the ModalInstanceController, and assign it to the scope of your modal instance.

将对象注入ModalInstanceController，并将其分配给模式实例的范围。

UI Bootstraps resolve works exactly the same as ngRouter's; as such if for whatever reason resolve cannot resolve an object, the modal will not open.

UI Bootstraps解析与ngRouter完全相同;因此，如果无论出于何种原因，无法解析对象，模态将无法打开。

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    user: function() {
      return $scope.user;
    }
  }
});

Scope - plunkr

An alternative, and arguably simpler method would be to pass in the parents scope in to the modal. Note that currently this doesn't work when using controllerAs syntax on the parent controller.

一种替代的，可以说更简单的方法是将父母范围传递给模态。请注意，当在父控制器上使用controllerAs语法时，这当前不起作用。

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  scope: $scope
});

#2

I would suggest using the promise from the result to set the value to your controller's variables instead. The "resolve" from my understanding is for passing controller's variable to the dialog for using inside the dialog, not to be changed directly. In your code example, passing result you set in $modalInstance.close() to modalInstance.result.then() will do the trick. In other words, changing line #18 and #19 to the following,

我建议使用结果中的promise将值设置为控制器的变量。我理解的“解决”是将控制器的变量传递给对话框以便在对话框内使用，而不是直接更改。在你的代码示例中，将你在$ modalInstance.close（）中设置的结果传递给modalInstance.result.then（）就可以了。换句话说，将第18行和第19行更改为以下内容，

modalInstance.result.then(function (data) {
$scope.user.name = data;

To improve the code a bit, you can actually pass the entire user object to allow adding additional attributes such as email, address, etc. to your user object easily. I had create an example at http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview.

为了稍微改进代码，您实际上可以传递整个用户对象，以便轻松地向用户对象添加其他属性，如电子邮件，地址等。我在http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview上创建了一个示例。