Question

我打开$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，并且在选择广播选项时不会更新。

我做错了什么？

Answer 1

$modal.open返回promise，请尝试：

 var addFriendGroupModal;

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

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

Answer 3

gertas

检索answer from a related question

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

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

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

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

无法访问$ modalInstance中的表单值

3 个答案: