如何从UI的角度引导模式传递表单数据，查看 [英] How to pass form data from angular ui bootstrap modal to view

问题描述

我创建一个web应用程序，我想实现一个选项，添加好友。我创建了添加好友页面与文本输入字段一个模式。我想通过我的视图页面上显示输入测试。如何显示这些数据到我的视图页面？

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?

这就是我目前有

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>

我的JavaScript文件：

my JavaScript file:

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：<一href=\"http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=$p$pview\">http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=$p$pview

推荐答案

您可以使用 modalInstance 的解析财产;这充当模态实例和父控制器之间的链接。

Resolve - plunkr

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

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

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

UI白手起家的决心作品完全一样ngRouter的;因此，如果出于某种原因决心不能决心的对象，该模式将无法打开。

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.

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

范围 - plunkr

这是另一种，可以说是比较简单的方法是在父母的范围传递模态。需要注意的是目前使用父控制器上的 controllerAs 语法时，这是行不通的。

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.

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

这篇关于如何从UI的角度引导模式传递表单数据，查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！