ngDialog Modal中的多个窗格用于Angular

Multiple panes in ngDialog Modal for Angular

本文关键字：用于 Angular Modal ngDialog      更新时间：2023-09-26

在ngDialog的示例中，它们显示了一个具有多个可以滚动的"窗格"的模式：http://likeastore.github.io/ngDialog/.

我通读了ngDialog指南，找不到一个简单的方法来实现这一点——任何想法都将不胜感激。我只需要窗格上的一个按钮，您可以单击该按钮转到模式中的下一个窗格。（与示例一样，但没有动画）。

谢谢！

         //Here is my Controller instantiation of the ngDialog
         $scope.clickToOpen = function(testy) {
           ngDialog.open({
             template: 'createNewTemplate',
             scope: $scope
           });
         };

这是我的HTML模板：

    <form ng-submit="login()">
      <h1>Login</h1>
        <input type="text" ng-model="loginUser.email" placeholder="Email">
        <input type="text" ng-model="loginUser.password" placeholder="Password">
        <button ng-click="goToNextPane()"> Login </button>
    </form>

你可以用不同的方式来做。。。

这是您的HTML登录模板。。

<form name="loginForm" id="login" ng-controller="loginCtrl as vm">
    <h3>Login</h3>
    <p>         Login Form goes here...
    </p>
    <button type="button" ng-disabled="loginForm.$invalid" ng-click="confirm()" class="btn btn-success pull-right">Next</button>
        <button type="button" ng-click="closeThisDialog('login')" class="btn btn-success pull-left">Cancel</button>
    <br> </form>

和。。帐户HTML模板。。。

<form name="accountForm" id="account" ng-controller="loginCtrl as vm">
    <h3>Login</h3>
    <p>
        Account Form goes here...
    </p>
    <button type="button" ng-disabled="accountForm.$invalid" ng-click="confirm()" class="btn btn-success pull-right">Update</button>
        <button type="button" ng-click="closeThisDialog('account')" class="btn btn-success pull-left">Cancel</button>
    <br>
</form>

这是棱角分明的脚本。。

(function () {
    "use strict";
    angular
        .module("dialogDemo")
        .controller("loginCtrl", ["ngDialog", loginCtrl]);
    function loginCtrl(ngDialog) {
        var vm = this;
        vm.login = function () {
            ngDialog.openConfirm({
                template: 'login.html',
                className: 'ngdialog-theme-default',
                showClose: false
            }).then(function (value) {
                //Here you could close the current dialog and open a new dialog 
                 ngDialog.close('login'); // Give your Diloag element Id
                 ngDialog.openConfirm({
                     template: 'updateAccount.html',
                     className: 'ngdialog-theme-default',
                     showClose: false
                 }).then(function (value) {
                     console.log('Modal promise resolved. Value: ', value);
                 }, function (reason) {
                    console.log('Modal promise rejected. Reason: ', reason);
                 });
                console.log('Modal promise resolved. Value: ', value);
            }, function (reason) {
                console.log('Modal promise rejected. Reason: ', reason);
            });
        };
    };
}());

这个回答与您最初的问题相距甚远，但我在寻找其他对话框提供程序时偶然发现了它。

不管怎样，我的ngDialog分支(https://github.com/danahartweg/ngDialog)支持多个窗格。在这一点上，他们的上游有点过时了，只是还没有机会更新。我最初把它折叠到ngDialog中的PR被拒绝了，因为他们觉得它不应该膨胀到核心库中。

相关文章：