用于登录/注册Angular应用程序的模式/对话框

Modal/dialog for login/signup for an Angular app

本文关键字：模式 应用程序 对话框 Angular 登录 注册 用于      更新时间：2024-06-01

我正在尝试为我的应用程序实现登录/签名对话框（类似于Medium的对话框）。我在网上搜索了很多关于它的信息，我想我会使用angular ui bootstrap中的$modal。我想知道是否有人可以指导我使用$model制作类似的东西。感谢您的帮助。

谢谢！

文档：https://github.com/angular-ui/bootstrap/tree/master/src/modal<lt；包含代码示例。标记和Javascript。从这里开始。

http://www.nganimate.org/<lt；这可以帮助创建一个类似于Medium登录的介绍过渡效果。

这里有一个开始（填空，写下你的模态html+控制器）：

index.html:

<style type="text/css">
    .login-intro.ng-enter { /*starting css properties. Transparency, position etc*/ }
    .login-intro.ng-enter.ng-enter-active { /*final css properties. The ngAnimate will transition these for you*/ }
</style>
<div ng-controller="MainCtrl as main">
    <a href="#" ng-click="main.openLoginModal()">Log in / Sign up</a>
</div>

main-controller.js:

(
var myModule = angular.module('myModule', ['ui.bootstrap']);
myModule.controller('MainCtrl as main', function($modal){
    var controller = this;
    controller.openLoginModal = function(){
        var modalInstance = $modal.open({
            templateUrl: 'login-template.html',
            controller: 'LoginController as login'
        };
        modalInstance.result.then(function () {
            // Redirect to the logged-in area of your site
        }, function () {
            // optional function. Do something if the user cancels.
        });
});

})();

login-template.html：

<div ng-view class="login-intro">
    <!--login inputs, buttons etc here-->
</div>

这可能不能直接回答您的问题，但我已经使用ngDialog完成了登录模式对话框(https://github.com/likeastore/ngDialog)具有与Medium站点类似的功能。您可能需要查看ngDialog。

相关文章：