无法访问 $modalInstance 中的表单值答案

【问题标题】：Can't access form values in a $modalInstance无法访问 $modalInstance 中的表单值
【发布时间】：2014-09-26 11:35:06
【问题描述】：

我正在打开一个$modalInstance，其中用户必须从无线电输入中选择一个选项（动态加载的值）并返回选择的值。

我有这个功能打开$modalInstance：

$scope.openAddFriendGroup = function () {
  var addFriendGroupModal = $modal.open({
    templateUrl: "addFriendGroupModal.html",
    controller: ModalAddFriendGroupCtrl,
    resolve: {
      myDetails: function () {
        return $scope.info;
      }
    }
  });
};

那么这是$modalInstance控制器：

var ModalAddFriendGroupCtrl = function ($scope, $modalInstance, myDetails, groupsSvc) {
  $scope.addableFriends = [];
  $scope.chosenFriend = null;

  //here goes a function to retrieve value of $scope.addableFriends upon $modalInstance load

  $scope.addFriend = function () {
    $scope.recording = true;

    groupsSvc.addFriend($scope.chosenFriend, myDetails).then(function (response) {
      if(response.status && response.status == 200) {
        $modalInstance.close($scope.userid);
      }
    }, function (err) {
      $modalInstance.dismiss(err);
    });
  };
};

这是addFriendGroupModal.html，模态本身的HTML：

<div id="add-friend-group-modal">
  <div class="modal-header">
    <h3 class="modal-title">Add friend</h3>
  </div>
  <div class="modal-body">
    <form class="form" role="form" ng-hide="loading">
      <div class="form-group">
        <label class="control-label">Friend:</label>
        <div class="radio" ng-repeat="thisFriend in addableFriends">
          <label>
            <input type="radio" id="friend{{thisFriend.id}}" name="chosenFriend" ng-model="$parent.chosenFriend" ng-value="thisFriend" /> {{thisFriend.name}} {{thisFriend.surname}}
          </label>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="addFriend()">Add friend</button>
  </div>
</div>

现在，当我尝试检索模式中表单的单选按钮中选择的值时，问题就来了。我似乎无法在$scope.addFriend 中检索此值。 $scope.chosenFriend 的值保持在 null 并且在选择单选选项时不会更新。

我做错了什么？

【问题讨论】：

angular bootstrap modal masks forms 的可能重复项

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

$modal.open 返回承诺，请尝试：

 var addFriendGroupModal;

 $modal.open({ ...})
  .result.then(function(response){
      addFriendGroupModal  = response;
   });

【讨论】：

我认为您没有理解我的问题。问题是chosenFriend 的值没有根据模态表单中选择的选项在模态范围内更新。

【解决方案2】：

<input type="radio" id="friend{{thisFriend.id}}" name="chosenFriend" ng-model="$parent.chosenFriend" ng-value="thisFriend" /> {{thisFriend.name}} {{thisFriend.surname}}

在这里，您的 ng-model 是 $parent.chosenFriend 那么，您为什么期望 $scope.chosenFriend 不是空值？将您的 ng-model 属性更改为 $scope.chosenFriend。

【讨论】：

我已经从ng-model 中删除了$parent，但我仍然收到null，好像表单没有更新值一样。然而，$parent 事物与单选按钮相关，在 Angular 中创建子范围。

【解决方案3】：

检索 answer from a related question，作者 gertas

Angular-UI 模态使用嵌入来附加模态内容，这意味着在模态中创建的任何新范围条目都是在子范围中创建的。表单指令会发生这种情况。

这是已知问题：https://github.com/angular-ui/bootstrap/issues/969

我提出了适用于我的快速解决方法，使用 Angular 1.2.16：
  <form name="$parent.userForm">
userForm 在 modal 的控制器 $scope 中创建并可用。感谢范围继承 userForm 访问在标记中保持不变。
  <div ng-class="{'has-error': userForm.email.$invalid}"}>

因此，在我的表单中，我必须将name="$parent.friendForm" 属性设置为<form>，然后将单选按钮模型绑定到它ng-model="friendForm.chosenFriend"，以便能够从$scope.friendForm.chosenFriend 的模态范围读取它.

【讨论】：