在AngularJS中的弹出窗口中包装一个表单

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

您所能做的是用div包装表单，并使该div位置为您想要的绝对和样式，您可以将ng-show绑定到它，并从控制器控制弹出窗口的显示/隐藏。

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

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

Answer 2

如果你想弹出它，我建议你需要使用一个UI框架，比如angular UI Bootstrap。这是链接，你也可以检查他们的样品

$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());
});
};