在$ modalInstance无法访问表单值 [英] Can't access form values in a $modalInstance

问题描述

我打开 $ modalInstance 在用户选择从无线电输入（动态加载的值）的选项和返回选择的值。

我有这个功能，打开 $ modalInstance ：

  $ scope.openAddFriendGroup =功能（）{
  VAR addFriendGroupModal = $ modal.open（{
    templateUrl：addFriendGroupModal.html
    控制器：ModalAddFriendGroupCtrl，
    解析：{
      myDetails：功能（）{
        返回$ scope.info;
      }
    }
  }）;
};
 

那么这是 $ modalInstance 控制器：

  VAR ModalAddFriendGroupCtrl =功能（$范围，$ modalInstance，myDetails，groupsSvc）{
  $ scope.addableFriends = [];
  $ scope.chosenFriend = NULL;  //这里去功能在$ modalInstance load检索$ scope.addableFriends的价值  $ scope.addFriend =功能（）{
    $ scope.recording = TRUE;    groupsSvc.addFriend（$ scope.chosenFriend，myDetails）。然后（功能（响应）{
      如果（response.status＆安培;＆安培; response.status == 200）{
        $ modalInstance.close（$ scope.userid）;
      }
    }，功能（错误）{
      $ modalInstance.dismiss（ERR）;
    }）;
  };
};
 

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

 ＆LT; D​​IV ID =附加朋友群模态＆GT;
  ＆LT; D​​IV CLASS =模头＆GT;
    ＆LT; H3类=模式标题＆gt;添加好友＆LT; / H3 GT＆;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模体＆GT;
    ＆LT;窗​​体类=形式角色=形式NG隐藏=加载＆GT;
      ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT;标签类=控制标签＆GT;朋友：LT; /标签＆gt;
        ＆LT; D​​IV CLASS =单选NG重复=thisFriend在addableFriends＆GT;
          ＆LT;标签＆gt;
            ＆LT;输入类型=电台ID =朋友{{thisFriend.id}}NAME =chosenFriendNG模型=$ parent.chosenFriendNG值=thisFriend/＆GT; {{thisFriend.name}} {{thisFriend.surname}}
          ＆LT; /标签＆gt;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; /表及GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模式躯＆GT;
    ＆LT;按钮类=BTN BTN-主要NG点击=addFriend（）＆gt;添加好友＆LT; /按钮＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

现在，问题是当我尝试检索已在模态窗体的单选按钮被选中的值。我似乎无法检索 $ scope.addFriend 此值。 $ scope.chosenFriend 的值保持在空并选择电台选时，不会得到更新。

我在做什么错了？

解决方案

这是一个相关的问题检索答案，< STRONG> gertas

  

角UI情态动词使用transclusion附加模式的内容，这意味着模态之内所做的任何新范围条目儿童范围内创建。这种情况与形式的指令。

  
  

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

  
  

我提出的解决方法快速而对我的作品，具有角1.2.16：

 ＆LT;表格名称=$ parent.userForm＆GT;
 

的窗体创建和模式的控制器可用 $范围。由于范围继承窗体访问在标记保持不变。

 ＆LT; D​​IV纳克级={'有错误：userForm.email $无效}}＆GT;
 

所以，在我的形式，我将不得不设置一个 NAME =$ parent.friendForm属性＆LT;形式＆GT; ，然后单选按钮模型绑定到它， NG-模式=friendForm.chosenFriend要能够在<$从模式的适用范围阅读C $ C> $ scope.friendForm.chosenFriend 。

I'm opening a $modalInstance in which user has to choose an option from radio inputs (values loaded dynamically) and return chosen value.

I have this function to open the $modalInstance:

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

Then this is the $modalInstance controller:

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);
    });
  };
};

And this is addFriendGroupModal.html, the HTML for the modal itself:

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

Now, the problem comes when I try to retrieve the value that has been selected in the radio buttons of the form in the modal. I can't seem to retrieve this value in $scope.addFriend. The value of $scope.chosenFriend stays at null and does not get updated when selecting a radio option.

What am I doing wrong?

解决方案

Retrieved answer from a related question, by gertas

Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope. This happens with form directive.

This is known issue: https://github.com/angular-ui/bootstrap/issues/969

I proposed the quick workaround which works for me, with Angular 1.2.16:

  <form name="$parent.userForm">

The userForm is created and available in modal's controller $scope. Thanks to scope inheritance userForm access stays untouched in the markup.

  <div ng-class="{'has-error': userForm.email.$invalid}"}>

So, in my form I would have to set a name="$parent.friendForm" attribute to <form>, and then bind the radio button model to it, ng-model="friendForm.chosenFriend" to be able to read it from the modal scope at $scope.friendForm.chosenFriend.

这篇关于在$ modalInstance无法访问表单值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！