Question

我有一个角度模态显示数据。

我想调整它的大小。我使用了jQueryUI.But resizable只在水平工作时垂直完成，只有jQueryUI手柄移动，模态保持静止。

我使用模板显示我的模态，如下所示。

$timeout(function () {                     
    var resizeOptions = { handles: 'all'};
    $(".modal-dialog").draggable();
    $(".modal-dialog").resizable(resizeOptions);
}, 0);                                                                                                                         

<script type="text/ng-template" id="tablemodal">
    <div class="modal-header">
        <div class="modal-title">Chart Data</div>
    </div>
    <div class="modal-body">
        <div class="table-responsive" data-pattern="priority-columns" data-focus-btn-icon="fa-asterisk" data-sticky-table-header="true" data-add-display-all-btn="true" data-add-focus-btn="true">
            <table cellspacing="0" class="table table-small-font table-bordered table-striped">
                <tbody>
                    <tr>
                        <th>x</th>                       
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="close();">Close</button>
    </div>
</script>

Answer 1

我建议当我们有像ngModal等可用的真棒库时，避免制作自己的模态。我在这里解释如何使用ngModal。

您必须运行以下命令才能安装此

bower install ngModal

或者如果你想将它添加到你的bower.json文件中，如下所示

dependencies: {
 "ngModal": "~1.2.0"
}

并在添加到bower.json

后运行以下命令

npm install
bower install

要使用该库，请添加JS文件和CSS文件，然后在您的应用中包含该模块：

app = angular.module("myApp", ["ngModal"])

你很高兴这样做

<modal-dialog show='dialogShown' dialog-title='My Dialog' height='400px' width='75%'>
  <p>Dialog content goes in here</p>
</modal-dialog>

如何使角度模态可调整大小

1 个答案: