Несколько панелей в ngDialog Модальные для Angular

Question

В примере для 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> 

Answer 1

Вы могли бы сделать это по-другому ...

Вот ваш 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); 
      }); 
     }; 

    }; 

}()); 

Answer 2

Этот ответ удивительно далек от вашего первоначального вопроса, но я случайно наткнуться на него, ища другие диалоговые провайдер.

В любом случае, моя вилка ngDialog (https://github.com/danahartweg/ngDialog) имеет поддержку нескольких панелей. На данный момент это немного устарело, и у них не было возможности обновить его. Мой оригинальный PR, чтобы сложить его в ngDialog, был отклонен, поскольку они чувствовали, что он не должен раздувать основную библиотеку.