2

In the example for ngDialog they show a modal that has multiple 'panes' that you can scroll through: http://likeastore.github.io/ngDialog/.

I read through the ngDialog guide and couldn't find an easy way to accomplish this - any ideas would be greatly appreciated. All I want is a button on the pane that you are able to click to go to the next pane in the modal. (Just like the example - but without the animation).

Thanks!

         //Here is my Controller instantiation of the ngDialog

         $scope.clickToOpen = function(testy) {
           ngDialog.open({
             template: 'createNewTemplate',
             scope: $scope
           });
         };

And here is my HTML Template:

    <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>
Luke Schunk
  • 241
  • 2
  • 13

2 Answers2

1

You could do this in different way...

Here is your HTML Login Template..

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

and.. the Account HTML template...

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

Here is the angular script..

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

    };

}());
Joisys
  • 96
  • 1
  • 5
1

This response is amazingly far removed from your original question, but I happened to stumble upon it while looking for other dialog providers.

Anyway, my fork of ngDialog (https://github.com/danahartweg/ngDialog) has support for multiple panes. It's a bit out of date with their upstream at this point, just haven't had a chance to get it updated. My original PR to fold it into ngDialog proper was declined as they felt it shouldn't bloat the core library.

Dana
  • 11
  • 2