angularjs - 如何以 Angular 访问弹出模型 Controller 中的 ng-model 值？

Question

我想从 Controller 内访问 ngModel，但这里 ngModel 是在弹出输入字段中定义的。我想访问 Controller 中的数量和名称值。请注意，整个代码是模型弹出窗口。

型号代码

<ion-modal-view> 
    <ion-header-bar>
        <h1 class="title">Item Details</h1>
    </ion-header-bar>
    <ion-content padding="true">
        <form ng-submit="addItem()">
            <div class="list list-inset">
                <label class="item item-input">
                    <span class="input-label">Name</span>
                    <input type="text" name="name" ng-model="name">
                </label>
                <label class="item item-input">
                    <span class="input-label">Qty</span>
                    <input type="number" name="qty" ng-model="qty">
                </label>
                <div class="padding item text-center">
                    <button class="button button-dark">Add To Cart</button>
                    <a class="button  button-assertive" ng-click="closeModal()">Cancel</a>            
                </div>
            </div>
        </form>
    </ion-content>
</ion-modal-view>

Controller 代码

.controller('GuestDetailsCtrl', function($scope){
    $scope.addItem = function() {
        alert($scope.name);
        alert($scope.qty);
    }; 
});

Answer 1

您可以尝试在函数中提供参数，如下所示:

<ion-modal-view> 
<ion-header-bar>
    <h1 class="title">Item Details</h1>
</ion-header-bar>
<ion-content padding="true">
    <form ng-submit="addItem(params)">
        <div class="list list-inset">
            <label class="item item-input">
                <span class="input-label">Name</span>
                <input type="text" name="name" ng-model="params.name">
            </label>
            <label class="item item-input">
                <span class="input-label">Qty</span>
                <input type="number" name="qty" ng-model="params.qty">
            </label>
            <div class="padding item text-center">
                <button class="button button-dark">Add To Cart</button>
                <a class="button  button-assertive" ng-click="closeModal()">Cancel</a>            
            </div>
        </div>
    </form>
</ion-content>

在你的 Controller 中:

   .controller('GuestDetailsCtrl', function($scope){
      $scope.addItem = function(params) {
          alert(params.name);
          alert(params.qty);
      }; 
  });