モーダルフォーム（角度）からユーザー入力を引き出す

Question

私は現在、モーダルフォームの設定をしていて、どうしたらいいかうまく動作しますが、ユーザーがテキストボックスや選択肢に入力した情報を取得する必要があります。私は始める必要があります。以下は、私のモーダルフォームのコードです。私は直接的な答えを必ずしも探しているわけではなく、より多くの情報が正しい方向に向いていると思う。

<div ng-app='plunker' ng-controller="ModalDemoCtrl"> 
    <script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3>Create a new post</h3> 
    </div> 
    <form name="modalForm"> 
    <div class="modal-body"> 
     <div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" > 
     <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" placeholder="Post Title" required/><br> 
     <textarea name="modalInput" class="form-control" rows="10" maxlength="1000" form="modalForm" ng-model="data.myNumber2" placeholder="Post Body" required></textarea><br> 
     <label for="sel1">Select category:</label> 
      <select name="modalInput" class="form-control" ng-model="data.myNumber3" id="sel1" required> 
       <option value="" selected disabled>Please select</option> 
       <option value='lifestyle'>lifestyle</option> 
       <option value='travel'>travel</option> 
       <option value='video'>video</option> 
      </select><br> 
     <input name="modalInput" type="url" class="form-control" size="10" ng-model="data.myNumber4" placeholder="http://www.postUrlHere.com"/> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">Submit</button> 
     <button class="btn btn-primary" ng-click="cancel()">Cancel</button> 
    </div> 
    </form> 
    </script> 
    <h1>GWAT Websites and Designs</h1> 
    <button class="btn" ng-click="open()">Submit new post</button> 
</div> 
<script> 
var myMod = angular.module('plunker', ['ui.bootstrap']); 
var ModalDemoCtrl = function($scope, $uibModal, $log) { 
    $scope.items = ['title', 'body', 'category', 'url']; 

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

    modalInstance.result.then(function(selectedItem) { 
     $scope.selected = selectedItem; 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
    }; 
}; 

編集：

var ModalInstanceCtrl = function($scope, $uibModalInstance, data) { 
    $scope.items = items; 
    $scope.selected = { 
    item: $scope.items[0] 
    }; 

    $scope.ok = function() { 
    $uibModalInstance.close($scope.selected.item); 
    }; 

    $scope.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
    }; 
}; 

myMod.controller('ModalDemoCtrl', ModalDemoCtrl); 
myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl); 
</script> 

Answer 1

あなたはmodalInstanceに現在のページからの$ scope.dataを送信するために探しているなら、あなたは解決オブジェクトにプロパティを追加する必要があります。 ModalInstanceCtrlから

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

、依存関係として「データ」を追加し、あなたは、関連するデータを取得することができるようになります。