Question

我找到了几个示例，但是它们似乎矛盾，或者是为较旧版本的ng-bootstrap设计的。

创建可以放在公共文件夹中然后在页面上用于多个模态的简单模态的正确方法是什么？我想将表单组件作为模态的主体传递。

是的，我已经在官方网站上看到了该示例。但这并未考虑页面上具有多个模式/模式触发器。它假设您只有一个，而不必定位。我需要传递一个ID，以便在模态中编辑一条数据并将其保存回数据库。

Answer 1

您可以制作可重复使用的模式布局

第一件事就是添加模式布局

<!-- The Default modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size:19px;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>

然后使用jquery触发模式

$(document).on('click', '.click-btn', function () {
    var dataURL = $(this).attr('data-href');
    var id = $(this).attr('id');
    $('.modal-title').html(id);
    $('.modal-body').load(dataURL, function () {
        $('#myModal').modal({ show: true });
    });
});

注意： dataURL 是您要显示的模式内容

希望有帮助

Answer 2

我也遇到类似的情况，我创建了一个简单的Modal并将其放在HTML文件中

public const string EMAIL_VALIDATION_PATTERN = @"^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))){2,63}\.?$";

并使用相同的模式来分发在AngularJS控制器中设置的不同种类的消息。

<div id="InformUser" class="modal fade active" role="dialog" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Status</h4>
                </div>
                <div class="modal-body">
                    <h5><i class="fa fa-info-circle fa-3x"></i><b>{{message}}</b></h5>
                    <br />
                    <br />
                    <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
 </div>

您可以尝试类似的方法。在您的情况下，您可以根据某些触发器ID使用ng-show或ng-hide来显示不同的Form组件，而不是使用Modal-Id。

制作可重用模态组件的正确方法

2 个答案: