Question

我有以下表格：

<form ng-submit="$ctrl.submit({from:$ctrl.from, to:$ctrl.to})">
    <label>From:
        <input type="text" name="input" ng-model="$ctrl.from">
    </label>
    <label>To:
        <input type="text" name="input" ng-model="$ctrl.to">
    </label>
        <input type="submit" id="submit" value="Apply" />
</form>

我正在网上寻找一种方法将其包装在弹出窗口中，但没有找到任何关于它的信息。

现在表单一直出现在屏幕上，我想要做的是点击它时显示为弹出窗口。

有没有办法做到这一点？

Answer 1

如果你想要它弹出，我建议你需要使用像UI UI Bootstrap这样的UI框架。这是link您还可以查看他们的sample

$ctrl.openComponentModal = function () {
var modalInstance = $uibModal.open({
  animation: $ctrl.animationsEnabled,
  component: 'modalComponent',
  resolve: {
    items: function () {
      return $ctrl.items;
    }
  }
});

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

Answer 2

你可以做的是用div包装你的表单并根据需要将div位置设置为绝对和样式，并且可以将ng-show绑定到它并控制弹出窗口的显示/隐藏控制器。

我在这里创建了一个插件，请查看http://embed.plnkr.co/z3dXmI/ 它会给你一个想法，但你可以随心所欲地设计它。

另外，我建议使用UI框架/库，例如SemanticUI或Bootstrap

将表单包装在AngularJS

2 个答案: