如何从角度 ui 引导模式传递表单数据以查看答案

【问题标题】：How to pass form data from angular ui bootstrap modal to view如何从角度 ui 引导模式传递表单数据以查看
【发布时间】：2014-10-26 07:09:21
【问题描述】：

我正在创建一个 web 应用程序，我想实现一个添加朋友的选项。我已经将添加朋友页面创建为带有文本输入字段的模式。我想通过在我的视图页面上显示输入来测试这一点。如何在我的视图页面上显示这些数据？

这是我目前拥有的

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>

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

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap-tab

【解决方案1】：

解决 - plunkr

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

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

UI Bootstraps 解析的工作方式与 ngRouter 的完全相同；因此，如果由于某种原因 resolve 无法解析对象，则模式将不会打开。

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

范围 - plunkr

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：