Angular 的 ngDialog 模式中的多个窗格
Multiple panes in ngDialog Modal for Angular
在 ngDialog 的示例中,他们显示了一个具有多个 'panes' 的模式,您可以滚动浏览: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>
这是 angular 脚本..
(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 被拒绝了,因为他们认为它不应该使核心库膨胀。
在 ngDialog 的示例中,他们显示了一个具有多个 'panes' 的模式,您可以滚动浏览: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>
这是 angular 脚本..
(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 被拒绝了,因为他们认为它不应该使核心库膨胀。