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，则必须向resolve对象添加属性。

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

从ModalInstanceCtrl中添加＆＃34;数据＆＃34;作为依赖项，您将能够检索相关数据。

从模态形式拉出用户输入（角度）

1 个答案: