Question

只是Angular JS的初学者。在模态窗口场景中苦苦挣扎。以下是我的应用程序中的一个简单场景：

具有“添加新”按钮的登陆主页，单击“添加新”按钮将打开一个模式窗口，该窗口具有冗长的形式。以下是我面临的问题/问题：

首次点击“添加新”按钮可打开模态窗口。使用右上角的“十字”图像关闭它然后重新打开然后它将根本不打开。我已经发布了已经发布的Stack溢出的几个线程，但没有任何帮助。此外，已经在角度文档上搜索和阅读了很多内容，但Angular文档似乎适用于使用Angular JS的专业人员。
其次，我需要帮助使我的模态窗口起作用。我在模态窗口上有一个很长的形式。有一个“保存”按钮，“关闭”按钮＆amp; “删除”按钮。我想具体知道，
- 我应该在哪里放置表单标签 - 在主着陆页模板html（home.html）或模态窗口模板html（createNewRI.html）中？如何处理模态窗口中的表单？
- 如何在我的模态窗口窗体上单击“保存”按钮时，如何确保混淆的“范围”事项得到处理。如何

目标网页模板（home.html）

{..............
..............
<div class="pull-right">
  <button type="button" class="btn btn-primary btn-with-text" ng-click="addModalOpen = true">
    <span class="glyphicon glyphicon-plus"></span> Add New Item
  </button>
</div>
............
..........
<form name="createRIForm" class="form-horizontal col-sm-6">
  <div ng-controller="AddCtrl" class="modal fade" ng-include="'createNewRI.html'" ng-class="{'in' : $parent.addModalOpen}">
</div></form>
.......
....... End of the main landing page i.e., home.html }

模态窗口模板html（createNewRI.html）

...............
...........
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" ng-click="$parent.addModalOpen = false">&times;    </button>
      <h4 class="modal-title" id="myModalLabel">Create New Item</h4>
    </div>
    <div class="modal-body">
      ...modal body contains around 25 fields ....
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-primary">Delete</button>
    </div>           
  </div>
</div>

}

任何帮助都会立即帮助我，因为我对此非常不满意。根据我上面的代码片段，有人可以帮我一些代码片段吗？

Answer 1

您无需费心存储模态的当前状态，只需将其打开并关闭即可。这是我的尝试（我已多次使用此方法，但此特定代码未经测试）：

HTML ，更改为点击按钮时执行showModal，并从表单中删除了ng-class：

<div class="pull-right">
  <button type="button" class="btn btn-primary btn-with-text" ng-click="showModal()">
    <span class="glyphicon glyphicon-plus"></span> Add New Item
  </button>
</div>
..........
<form name="createRIForm" class="form-horizontal col-sm-6">
  <div ng-controller="AddCtrl" class="modal fade" ng-include="'createNewRI.html'">
</div></form>

<强>角：

// In the controller
$scope.showModal = function() {
    $(".modal").modal("show");
}

模态，更改为仅使用data-dismiss：

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">&times;</a>
      <h4 class="modal-title" id="myModalLabel">Create New Item</h4>
    </div>
    <!-- DELETED FOR BREVITY -->
</div>

Angular JS模态窗口功能

1 个答案: