從模態形式（角度）拉用戶輸入

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

如果你正在尋找從當前頁面發送$ scope.data到modalInstance，你將有一個屬性添加到解決對象。

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

從ModalInstanceCtrl，加上「數據」作爲依賴，你將能夠檢索相關數據。