angular - Správný způsob, jak vytvořit znovupoužitelnou modální komponentu

Našel jsem několik příkladů, ale každý z nich se zdá být protichůdný nebo je určen pro starší verze ng-bootstrap.

Jaký je správný způsob, jak vytvořit jednoduché modální okno, které lze umístit do společné složky a poté znovu použít pro více modálních oken na stránce? Chci předat komponentu formuláře jako obsah modálního okna.

A ano, viděl jsem ten příklad na oficiálních stránkách. Ale nezohledňuje to možnost mít na stránce více modalů/spouštěčů modalu. Předpokládá to, že máte jen jeden a nemusíte cílit. Potřebuji předat id pro kus dat, který má být upraven v modalu a uložen zpět do databáze.

Odpověď č. 1

Měl jsem podobnou situaci, vytvořil jsem jednoduché modální okno a umístil ho do HTML souboru

<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>

A použijte stejný modál k zobrazení různých typů zpráv, nastavených v AngularJS Controlleru.

$scope.message = "My Message";

Můžeš zkusit něco takového. Ve vašem případě můžete použít ng-show nebo ng-hide k zobrazování různých komponent formuláře na základě nějakého spouštěcího ID místo použití ID modálního okna.

Odpověď č. 2

můžete vytvořit znovupoužitelné modální rozvržení

První věc, kterou je třeba udělat, je jednoduše přidat modální rozvržení

<!-- 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>

pak použij jquery k vyvolání modálního okna

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

Poznámka: dataURL je obsah modálního okna, které chcete zobrazit

Doufám, že to pomůže